browser-sync

浏览器同步测试工具。能够实时监听 html,css 等文件的变化，实现 html 自动重载，css 自动插入(不刷新页面)。更重要的是Browsersync可以同时在PC、平板、手机等设备下进项调试。

usage: 

1. 

$ cnpm i -D browser-sync

gulpfile.js:

var browserSync = require('browser-sync');

gulp.task('browser-sync', ['build', 'sass'], function(){

        browserSync({  server: { baseDir: '..' } })

});  // 表示在执行 browser-sync 任务之前先执行 build sass 任务，回调函数表示在本地端开启了一个 server 服务，用来监听文件变化

构建起 browserSync 服务器之后，还没完，还需要修改 sass ，watch 任务

gulp.task('sass', function(){

        gulp.src('styles/main.scss')

               .pipe(sass()).on('error', handleError)

               .pipe(prefix())

               .pipe(gulp.dest('../styles'))

               .pipe(browserSync.reload({stream: true}));  // 调用 reload 

});

gulp.task('rebuild', ['build'], function(){

       browserSync.reload();

})

gulp.task('watch', function(){

        gulp.watch(['**/*.html'], ['rebuild']);

        gulp.watch(['styles/*.scss'], ['sass']);

})

gulp.task('default', [ 'browser-sync', 'watch']);

2. 同步页面到移动端

－首先，打开terminal，ifconfig 获取机器的局域网IP地址（如：192.168.2.200)

－然后，打开手机的browser 连接 192.168.2.200:3000 就可以了，是不是很酷啊～