跟angular2學一鍵開啓項目--關於上個react-redux項目的一鍵調試

一鍵調試相似於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裏面抄來的~