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浏览器自动刷新的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 零售收银软件太难挑!实测市面上最受欢迎的
- 下一篇: 信访分析 大数据_【信访微观察】“大数据