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
