详解Grunt插件之LiveReload实现页面自动刷新（两种方案）

2024-05-04 23:38:30

字体：大中小

来源：转载

供稿：网友

这篇文章主要通过两种方案详解Grunt插件之LiveReload实现页面自动刷新,需要的朋友可以参考下

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

优点：安装、配置简单方便。
缺点：需要配合指定的浏览器插件（Firefox也有相关插件，IE么你懂的）。

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

执行命令：

复制代码代码如下:

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

2. 安装浏览器插件：Chrome LiveReload

3. 配置一个Web服务器（IIS/Apache），LiveReload需要在本地服务器环境下运行（对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']);

};