跟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裡面抄來的~