浏览器同步测试工具。能够实时监听 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 就可以了,是不是很酷啊~