使用grunt實現livereload(實時刷新)

在作網頁的時候，常常刷新頁面去查看修改的代碼是否正常的顯示出來。常常按【刷新鍵】好麻煩，若是改了代碼後，瀏覽器上就能看到更新代碼後的效果，那多好啊。

使用grunt（溫習一下怎麼使用grunt）

 

一、在項目路徑下安裝grunt

sudo npm install grunt --save-dev

 

二、生成package.json

npm init

實現livereload功能，須要使用grunt-contrib-watch插件

三、安裝grunt-contrib-watch插件

sudo npm install grunt-contrib-watch --save-dev

 

四、新建Gruntfile.js

module.exports = function(grunt){
     grunt.initConfig({
          pkg: grunt.file.readJSON('package.json'),
          watch: {
               livereload: {
                    options: { livereload: 8900},
                    files: ['www/**']
               },
          }
     });

      // 加載包含 "uglify" 任務的插件。
     grunt.loadNpmTasks('grunt-contrib-watch');

     // 默認被執行的任務列表。
     grunt.registerTask('default', ['watch']);
}

*livereload能夠設置爲」true「或者一個端口號，例如」8900「

五、在html裏添加

<script src="//localhost:8900/livereload.js"></script>

*這裏的端口號根據上面livereload的設置，若是是」true「，端口號是35729。

六、執行 grunt

很是簡單使用的功能，enjoy it!

 

參考資料：

https://github.com/gruntjs/grunt-contrib-watch