詳解Grunt插件之LiveReload實現(xiàn)頁面自動刷新（兩種方案）

2024-05-04 23:38:30

字體：大中小

來源：轉(zhuǎn)載

供稿：網(wǎng)友

這篇文章主要通過兩種方案詳解Grunt插件之LiveReload實現(xiàn)頁面自動刷新,需要的朋友可以參考下

方案一：grunt-livereload + Chrome Plug-in

優(yōu)點：安裝、配置簡單方便。
缺點：需要配合指定的瀏覽器插件（Firefox也有相關(guān)插件，IE么你懂的）。

1. 需要安裝2個插接件：grunt-contrib-watch、connect-livereload

執(zhí)行命令：

復制代碼代碼如下:

npm install --save-dev grunt-contrib-watch connect-livereload

2. 安裝瀏覽器插件：Chrome LiveReload

3. 配置一個Web服務器（IIS/Apache），LiveReload需要在本地服務器環(huán)境下運行（對file:///文件路徑支持并不是很好）。

4. 修改Gruntfile.js文件：

module.exports = function(grunt) {

// 項目配置(任務配置)

grunt.initConfig({

  pkg: grunt.file.readJSON('package.json'),

  watch: {

   client: {

    files: ['*.html', 'css/*', 'js/*', 'images/**/*'],

    options: {

     livereload: true

    }

   }

  }

});

// 加載插件

grunt.loadNpmTasks('grunt-contrib-watch');

// 自定義任務

grunt.registerTask('live', ['watch']);

};