跟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里面抄来的~