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还可以实现多终端同步操作。果然是我最爱的同步测试工具⁰）。

[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

 --------------------------------------

秒客网