gulp + browserSync 一块儿提升前端开发效率吧！

前端开发的时候，每次修改代码后，要移动鼠标到浏览器选中再刷新查看效果，不知觉间咱们的加班的时间又增长了0.5s， 真是罪孽！因此在使用gulp以后，就一直对能自动监听文件刷新页面的browserSync插件虎视眈眈。在这里简单的介绍一下用法，只须要五步，但愿对你们有所帮助。

browserSync是一款浏览器同步测试工具，能够单独使用，也能够插入在gulp、grunt等工做流里使用。点击官网了解更多。
Gulp + browserSync文档
Grunt + browserSync文档

step1: 在gulp中安装插件

npm install --save-dev browser-sync

step2: 在gulpfile中引入插件

var browserSync = require('browser-sync').create();
var reload = browserSync.reload;

step3: 启动browserSync任务，设置参数

browserSync之因此能实现多终端自动刷新测试，是由于他在你的局域网 IP 建立一个本地服务器，生成一个相似http://10.189.249.135:3002 的 URL，这样全部与你电脑处在一个局域网的设备，均可以访问到你本地的页面。

// 建立一个静态服务器
gulp.task('browser-sync', function() {
    browserSync.init({
        server: {
            baseDir: "./"
        }
    });
});

//在原有服务器中代理
gulp.task('blowser-sync', function() {
    browserSync.init({
        proxy:"localhost"  //"你的域名或IP"
    });
});

//注意，要在运行须要运用到blowser-sync的任务前，运行他的启动任务。
gulp.task('default',['blowser-sync', 'build:css', 'watch']);

step4: 在文件流里插入

如下是一个编译处理css文件的任务，咱们但愿在每次文件生成后自动刷新页面。js文件同理。

gulp.task('build:css', function() {
    gulp.src(['../css/less/*.less'])  //引入文件
        .pipe(less().on('error', function (e){
            console.error(e.message);
            this.emit('end');
        }))
        .pipe(minifycss())
        .pipe(gulp.dest('../css/'))
        .pipe(reload({stream: true}));    // 在须要的地方插入reload（自动刷新）命令
});

step5: 监听html文件

gulp.watch('../views/*/*').on('change', reload);

到这里，整个插件配置就完成啦。每次运行gulp，终端会提示浏览器经过browserSync访问的网址，以下：（除了自动刷新功能外，browserSync还能够实现多终端同步操做。果真是我最爱的同步测试工具^0^）。

[BS] Access URLs:
 --------------------------------------
       Local: http://localhost:3000        //在本机上访问的url
    External: http://192.168.3.101:3000   //在其余终端上访问的url
 --------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.3.101:3001
 --------------------------------------