Detailed explanation of Grunt plug-in LiveReload to realize automatic page refresh (two options), gruntlivereload_PHP tutorial

Detailed explanation of Grunt plug-in LiveReload to realize automatic page refresh (two options), gruntlivereload

Option 1: grunt-livereload Chrome Plug-in

Advantages: Installation and configuration are simple and convenient.
Disadvantages: Need to cooperate with specified browser plug-ins (Firefox also has related plug-ins, IE you know).

1. 2 plug-ins need to be installed: grunt-contrib-watch, connect-livereload

Execute command:

Copy code The code is as follows:
npm install --save-dev grunt-contrib-watch connect-livereload

2. Install browser plug-in: Chrome LiveReload

3. Configure a web server (IIS/Apache), LiveReload needs to run in the local server environment (support for file:/// file path is not very good).

4. Modify the Gruntfile.js file:

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']);
};

5. Execution: grunt live

When you see the following prompt, it means that the monitoring task has started:

Copy code The code is as follows:
Running "watch" task
Waiting...

6. Open our page, for example: http://localhost/

7. Click the ICON of the Chrome LiveReload plug-in again. At this time, the small dot in the center of the ICON circle becomes solid, indicating that the plug-in is executed successfully. At this time, you can change the website files and see if they are updated in real time?

Option 2: grunt-contrib-watch grunt-contrib-connect grunt-livereload

Advantages: Automatically build a static file server, no need to build a Web server on your own computer.
​ Does not require browser plug-in support (not currently limited to a specific browser).
There is no need to manually add livereload.js to the web page.
Disadvantages: For those who are new to it, the configuration is slightly complicated.

1. Install the 3 plug-ins we need: grunt-contrib-watch, grunt-contrib-connect, connect-livereload

Execute command:

Copy code The code is as follows:
npm install --save-dev grunt-contrib-watch grunt-contrib-connect connect-livereload

2. Modify the Gruntfile.js file:

module.exports = function(grunt) {
 // LiveReload的默认端口号，你也可以改成你想要的端口号
 var lrPort = 35729;
 // 使用connect-livereload模块，生成一个与LiveReload脚本
 // <script src="http://127.0.0.1:35729/livereload.js&#63;snipver=1" type="text/javascript"></script>
 var lrSnippet = require('connect-livereload')({ port: lrPort });
 // 使用 middleware(中间件)，就必须关闭 LiveReload 的浏览器插件
 var lrMiddleware = function(connect, options) {
  return [
   // 把脚本，注入到静态文件中
   lrSnippet,
   // 静态文件服务器的路径
   connect.static(options.base[0]),
   // 启用目录浏览(相当于IIS中的目录浏览)
   connect.directory(options.base[0])
  ];
 };
 // 项目配置(任务配置)
 grunt.initConfig({
  // 读取我们的项目配置并存储到pkg属性中
  pkg: grunt.file.readJSON('package.json'),
  // 通过connect任务，创建一个静态服务器
  connect: {
   options: {
    // 服务器端口号
    port: 8000,
    // 服务器地址(可以使用主机名localhost，也能使用IP)
    hostname: 'localhost',
    // 物理路径(默认为. 即根目录) 注：使用'.'或'..'为路径的时，可能会返回403 Forbidden. 此时将该值改为相对路径 如：/grunt/reloard。
    base: '.'
   },
   livereload: {
    options: {
     // 通过LiveReload脚本，让页面重新加载。
     middleware: lrMiddleware
    }
   }
  },
  // 通过watch任务，来监听文件是否有更改
  watch: {
   client: {
    // 我们不需要配置额外的任务，watch任务已经内建LiveReload浏览器刷新的代码片段。
    options: {
     livereload: lrPort
    },
    // '**' 表示包含所有的子目录
    // '*' 表示包含所有的文件
    files: ['*.html', 'css/*', 'js/*', 'images/**/*']
   }
  }
 }); // grunt.initConfig配置完毕
 // 加载插件
 grunt.loadNpmTasks('grunt-contrib-connect');
 grunt.loadNpmTasks('grunt-contrib-watch');
 // 自定义任务
 grunt.registerTask('live', ['connect', 'watch']);
};

5. Execution: grunt live

See the following prompt, indicating that the web server has been set up and the monitoring task has started:
Copy code The code is as follows:
Running "connect:livereload" (connect) task
Started connect web server on 127.0.0.1:8000.

Running "watch" task
Waiting...

Note: Before executing this command, if you have installed the LiveReload browser plug-in, it must be closed.

6. Open our page, for example: http://localhost:8000/ or http://127.0.0.1: 8000/
Note: The local server address opened here is the static file server address we just built through connect, instead of the Web server address you used to build your own using IIS or Apache.

The above is a detailed explanation of the Grunt plug-in LiveReload to realize automatic page refresh (two options) in this article. I hope you like it.

http://www.bkjia.com/PHPjc/1041331.htmlwww.bkjia.comtruehttp: //www.bkjia.com/PHPjc/1041331.htmlTechArticleDetailed explanation of Grunt plug-in LiveReload to realize automatic page refresh (two options), gruntlivereload option one: grunt-livereload Chrome Plug -in Advantages: Installation and configuration are simple and convenient. Disadvantages...