gulp-connect浏览器自动刷新

LiveReload可以理解成即时刷新，在前端开发中，在编写或调试html/js/css代码后需要从编辑器切换到浏览器，再刷新浏览器才能看到页面变化，这种频繁的操作在一定程度上影响了工作效率，而LiveReload可以帮助我们解决了这个问题。

实现原理：通过在本地开启一个gulp服务，检测文件变化，当文件被修改后触发livereload任务，推送消息给浏览器刷新页面。

安装gulp-connect插件   //npm install gulp-connect

安装gulp-watch插件 //npm install gulp-watch

//实时刷新
var connect = require('gulp-connect'),
    watch = require('gulp-watch');

//定义livereload任务
gulp.task('connect',function(){
    connect.server({
        livereload:true
    })
})
//定义html任务
gulp.task('html',function(){
    gulp.src('.')
        .pipe(connect.reload());
})
//定义css任务
gulp.task('css',function(){
    gulp.src('css')
        .pipe(connect.reload());
})
//定义看守任务
gulp.task('watch',function(){
    gulp.watch('./index.html',['html']);
    gulp.watch('css/index.css',['css']);
})
//定义默认任务
gulp.task('default',['connect','watch']);

这个小demo只是简单的实验了一番，gulp启动任务后，可以看到终端显示在8080端口开启了一个http服务，然后当你在编辑器中保存完代码后就会触发浏览器自动刷新。

总结

以上是生活随笔为你收集整理的gulp-connect浏览器自动刷新的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。