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浏览器自动刷新的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。