Browsersync初使用

gulp是一个很好得东东，用好它可以提高开发效率，加快开发速度。但是，前提是用好...如果gulpfile的流程写的有问题，就会导致很头疼的问题，就是每次修改代码，都要build一下，再serve一下，这样就违反了我们刚开始使用gulp的初衷了，使得开发变得繁琐和低效。那么，如何实现实时刷新呢？Browsersync便能实现这样的功能。http://www.browsersync.cn/，这个是它的官网。

好的，下面就动手修改你的gulpfile吧。

首先，先安装

$ npm install browser-sync gulp --save-dev
然后在您的 gulpfile.js 文件里使用它们
    var gulp        = require('gulp');
    var browserSync = require('browser-sync').create();
    var reload = browserSync.reload;

    // 静态服务器
  gulp.task('browser-sync', function() {
    browserSync.init({
        server: "www/build"
        });
    });
这个server是指静态服务器，即项目要运行的路径。一般情况我们使用gulp，会将项目的初始代码迁移到另外一个文件夹中，我这里原本是app文件夹，然后都流到www下的build文件夹下。

然后就是改造scripts,html和sass这三个方法，分别是集成js,集成html，集成css。当然这个不一定，你可以根据自己的需求去改造。
    gulp.task('scripts', function () {
    return gulp.src([你的js文件路径])
        .pipe(concat('all.js'))
        .pipe(gulp.dest('www/build'))
        .pipe(reload({stream: true}));
    });
    gulp.task('sass', function () {
    return gulp.src(你的scss文件路径)
        .pipe(sass())
        .pipe(gulp.dest('www/build/css'))
        .pipe(reload({stream: true}));
    });
    gulp.task('html', function () {
    return gulp.src([你的html文件路径])
        .pipe(gulp.dest('www/build/pages'))
        .pipe(reload({stream: true}));
  })
可以看到，这三个其实都是在最后加了.pipe(reload({stream: true}));
然后按正常不走，我们要clean，build，就像这样
    gulp.task('build', function (cb) {
    runSequence('clean', ['sass', 'indexhtml', 'html', 'lib', 'scripts'], cb)
    });
最后才是执行我们的browserSync，它会自动打开浏览器，就像ionic serve
  gulp.task('serve', function () {

    browserSync.init({
        server: "www/build"
    });

    gulp.watch(src.scss, ['sass']);
    gulp.watch(src.html,['html']);
    gulp.watch(src.js, ['scripts']);
  });
这里，我们使用的是watch,它会实时监听代码的变动，然后再执行相应的任务。这样的话，我们每次执行项目就只需要gulp build,然后再gulp serve就可以了，之后就不用管了，修改了代码，然后保存一下，浏览器就会刷新了。不过建议webstorm设置成ctrl+s保存，而不是自动保存，不然会卡的...
我写了一个简单的demo,如果还有不清楚的话，可以看看，地址是
  git clone https://github.com/hanwolfxue/my-first-gulp.git