一鍵調試類似于webpack的hot-loader，但是這個hot-loader并不怎么好用，想省事的同學可以配置一下就完了。

今天介紹browser-sync，用它來一鍵開啟項目。它可以監聽任意文件的變動來reload瀏覽器，而且還可以自動打開項目，寫一個script的命令行，輕松做到一鍵。

這個是從angular2借鑒來的，angular2用到的是lite（一個小型的服務器，其實它也是封裝的browser-sync），concurrently（命令行同步執行命令的包），我們用到的是browser-sync和concurrently

還記得上個redux的新聞項目嗎，這次的代碼是把原來新聞項目改造為一鍵開啟。傳送門。改到master分支了。

首先介紹一下browser-sync。Browsersync能讓瀏覽器實時、快速響應您的文件更改（html、js、css、sass、less等）并自動刷新頁面。更重要的是?Browsersync可以同時在PC、平板、手機等設備下進項調試。

多端調試我們用不到，用它自動響應就好。

npm install -g browser-sync

安裝完，再執行

browser-sync start --server --files "**/*.css, **/*.html"

就能自動hot-load。用它的命令行是不需要寫配置文件的。后面--files匹配到的文件都可以熱加載，你可以自己寫需要改動的文件匹配。

這里我們結合gulp使用。

看一下怎么寫gulpfile

var gulp = require('gulp'); var browserSync = require('browser-sync').create();
var reload = browserSync.reload;gulp.task('serve', function() {browserSync.init({server: "./"}); gulp.watch("./*.html").on('change', reload);gulp.watch("dist/*.js").on('change', reload); }); gulp.task('default', ['serve']);

browserSync起一個服務器，gulp watch file，再調用reload。是不是很簡單。。

gulp也可以處理sass，

var gulp = require('gulp'); var browserSync = require('browser-sync').create(); var sass = require('gulp-sass'); var reload = browserSync.reload;// 靜態服務器 + 監聽 scss/html 文件 gulp.task('serve', ['sass'], function() {browserSync.init({server: "./app"});gulp.watch("app/scss/*.scss", ['sass']);gulp.watch("app/*.html").on('change', reload); });// scss編譯后的css將注入到瀏覽器里實現更新 gulp.task('sass', function() {return gulp.src("app/scss/*.scss").pipe(sass()).pipe(gulp.dest("app/css")).pipe(reload({stream: true})); });gulp.task('default', ['serve']);

現在輸入

gulp

就可以打開browser-sync的服務器，但是不能hot-load，為啥，因為項目里我們監聽的是webpack打包之后的文件，而且我們必須監聽這個。

webpack不編譯，bundle.js就不變…

那我們就再用webpack監聽文件的變化，webpack -w，自動監聽webpack匹配到文件的變化。

但是gulp監聽，webpack也監聽，這怎么寫命令？這就用到了concurrently，讓它兩個同時監聽。

具體用法就不說了，github搜一下，我就上命令了。angular2也是類似差不多的。它只是用的tsc來編譯ts文件。

webpack && concurrently \"npm run webpack:w\" \"npm run gulp\"

其中webpack:w === webpack -w

把它寫進package.json吧：

... "start": "webpack && concurrently \"npm run webpack:w\" \"npm run gulp\"","gulp":"gulp","webpack:w": "webpack -w", ...

注意:因為后面那個npm run gulp是字符串，你得把gulp在script里面寫一遍才行。

到此，現在執行

npm start

就可以hot-load啦。以后一鍵調試，一鍵開啟項目，都是非常爽的。它還可以適用于任何項目，原理就是監聽文件嘛。

angular2官方例子里面的script命令是：

tsc && concurrently \"npm run tsc:w\" \"npm run lite\"

和咱們寫的是一樣的-0-，哈哈，從angular2里面抄來的~

?

轉載于:https://www.cnblogs.com/dh-dh/p/5509824.html

總結

以上是生活随笔為你收集整理的跟angular2学一键开启项目--关于上个react-redux项目的一键调试的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。