livereload是一個(gè)web開發(fā)輔助工具，當(dāng)我們修改完html、css和js的時(shí)候會(huì)自動(dòng)刷新瀏覽器，解放碼農(nóng)的雙手。這樣在雙屏切圖、寫js代碼的時(shí)候會(huì)提高很多效率。livereload有很多版本，比如基于ruby的版本，我們今天介紹的是node+grunt+chrome插件一體化方案。

我們使用的這個(gè)livereload的基本原理是試用node開啟一個(gè)websocket服務(wù)，并且檢測文件變化，瀏覽器打開一個(gè)頁面時(shí)候，引入固定的livereload.js（chrome插件會(huì)幫忙加上）會(huì)建立ws請求，當(dāng)node檢測到文件變化，則自動(dòng)推送消息給瀏覽器，實(shí)現(xiàn)刷新。

livereload環(huán)境搭建

1. nodejs安裝
2. grunt安裝
3. grunt-contrib-watch：npm install grunt-contrib-watch –save-dev
4. grunt-livereload：npm install grunt-livereload –save-dev
5. chrome插件：安裝

編寫grunt的Gruntfile.js文件

進(jìn)入項(xiàng)目根目錄，安裝grunt基本服務(wù)（參考grunt使用介紹），然后修改Gruntfile.js內(nèi)容，添加如下：

livereload: {options: {base: 'public',},files: ['src/**/*']
}
watch: {all:{files: ['src/js/touch.js', 'src/sass/*.scss'],tasks: ['jshint', 'compass:dev'],},//grunt watch:js|cssjs:{files: ['src/js/touch.js'],tasks: ['jshint'],},css:{files: ['src/sass/*.scss'],tasks: ['compass:dev'],}
}
grunt.loadNpmTasks('grunt-livereload');grunt.registerTask('live', ['livereload', 'watch:css']);

建立一個(gè)live的任務(wù)，開啟livereload服務(wù)，同時(shí)watch css任務(wù)，當(dāng)css文件發(fā)生變化的時(shí)候，執(zhí)行compass:dev任務(wù)（即compass編譯任務(wù)）。

執(zhí)行g(shù)runt任務(wù)

當(dāng)我們進(jìn)行切圖（或者其他事情的時(shí)候），執(zhí)行cmd進(jìn)入項(xiàng)目目錄，執(zhí)行下面命令來啟動(dòng)grunt的live任務(wù)：

grunt live

瀏覽器端使用chrome插件
打開要自動(dòng)刷新的頁面，例如：http://127.0.0.1/test.html，點(diǎn)擊chrome插件livereload的icon，仔細(xì)觀察會(huì)發(fā)現(xiàn)icon的中間空心圓點(diǎn)變成了實(shí)心的。 這樣就可以自動(dòng)刷新了。

使用livereload

完成上面的步驟，這時(shí)候我們修改src/**/*下的文件就會(huì)自動(dòng)刷新頁面，我修改了test.scss文件，首先觸發(fā)的是watch:css任務(wù)，執(zhí)行compass:dev任務(wù)，即編譯css文件為test.css，這時(shí)觸發(fā)livereload，實(shí)現(xiàn)自動(dòng)刷新

轉(zhuǎn)載請注明轉(zhuǎn)自JS8.IN ?

轉(zhuǎn)載于:https://www.cnblogs.com/terrylin/p/3376717.html

總結(jié)

以上是生活随笔為你收集整理的使用livereload实现自动刷新的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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