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
--------------------------------------
上一篇:使用XIB实现嵌套自定义视图


下一篇:提高前端开发效率的N种方法