LiveReload可以理解成即時(shí)刷新，在前端開發(fā)中，在編寫或調(diào)試html/js/css代碼后需要從編輯器切換到瀏覽器，再刷新瀏覽器才能看到頁面變化，這種頻繁的操作在一定程度上影響了工作效率，而LiveReload可以幫助我們解決了這個(gè)問題。

實(shí)現(xiàn)原理：通過在本地開啟一個(gè)gulp服務(wù)，檢測文件變化，當(dāng)文件被修改后觸發(fā)livereload任務(wù)，推送消息給瀏覽器刷新頁面。

安裝gulp-connect插件 ? //npm install gulp-connect

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

//實(shí)時(shí)刷新
var connect = require('gulp-connect'),
? ? watch = require('gulp-watch');

//定義livereload任務(wù)
gulp.task('connect',function(){
? ? connect.server({
? ? ? ? livereload:true
? ? })
})
//定義html任務(wù)
gulp.task('html',function(){
? ? gulp.src('.')
? ? ? ? .pipe(connect.reload());
})
//定義css任務(wù)
gulp.task('css',function(){
? ? gulp.src('css')
? ? ? ? .pipe(connect.reload());
})
//定義看守任務(wù)
gulp.task('watch',function(){
? ? gulp.watch('./index.html',['html']);
? ? gulp.watch('css/index.css',['css']);
})
//定義默認(rèn)任務(wù)
gulp.task('default',['connect','watch']);

這個(gè)小demo只是簡單的實(shí)驗(yàn)了一番，gulp啟動(dòng)任務(wù)后，可以看到終端顯示在8080端口開啟了一個(gè)http服務(wù)，然后當(dāng)你在編輯器中保存完代碼后就會(huì)觸發(fā)瀏覽器自動(dòng)刷新。

總結(jié)

以上是生活随笔為你收集整理的gulp-connect浏览器自动刷新的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。