The Grunt plug-in LiveReload implements automatic page refresh (two solutions) and gruntlivereload

The Grunt plug-in LiveReload implements automatic page refresh (two solutions) and gruntlivereload

Solution 1: grunt-livereload + Chrome Plug-in

Advantages: simple installation and configuration.
Disadvantage: You need to work with the specified browser plug-in (Firefox also has related plug-ins, IE You know ).

1. install two plug-ins: grunt-contrib-watch and connect-livereload.

Run the following command:

Copy codeThe Code is as follows:
Npm install -- save-dev grunt-contrib-watch connect-livereload

2. Install the browser plug-in: Chrome LiveReload

3. configure a Web Server (IIS/Apache). LiveReload needs to run in the local server environment (File :///File Path support is not very good ).

4. Modify the Gruntfile. js file:

Module. exports = function (grunt) {// project configuration (Task configuration) grunt. initConfig ({pkg: grunt. file. readJSON ('package. json '), watch: {client: {files :['*. html ', 'css/*', 'js/* ', 'images/**/*'], options: {livereload: true }}}}); // load the plug-in grunt. loadNpmTasks ('grunt-contrib-Watch'); // customize the task grunt. registerTask ('live', ['watch']);};

5. Execute: grunt live

The following prompt indicates that the listening task has been started:

Copy codeThe 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. The dot in the center of the ICON circle becomes solid, indicating that the plug-in is successfully executed.Now you can change the website file to see if it is updated in real time?

Solution 2: grunt-contrib-watch + grunt-contrib-connect + grunt-livereload

Advantage: automatic creation of static file servers without the need to build Web servers on your computer.
Support for browser plug-ins is not required (not specified in a browser ).
You do not need to manually add livereload. js to the webpage.
Disadvantage: the configuration is slightly complicated for people who have just been in touch.

1. Install the three required plug-ins: grunt-contrib-watch, grunt-contrib-connect, and connect-livereload.

Run the following command:

Copy codeThe Code is as follows:
Npm install -- save-dev grunt-contrib-watch grunt-contrib-connect-livereload

2. Modify the Gruntfile. js file:

Module. exports = function (grunt) {// default port number of LiveReload, you can also change it to the port number var lrPort = 35729; // use the connect-livereload module, generate a LiveReload script // <script src = "http: // 127.0.0.1: 35729/livereload. js? Snipver = 1 "type =" text/javascript "> </script> var lrSnippet = require ('connect-livereload') ({port: lrPort }); // When Using middleware (middleware), you must disable the LiveReload browser plug-in var lrMiddleware = function (connect, options) {return [// inject the script into the static file lrSnippet, // connect. static (options. base [0]), // enables directory browsing (equivalent to directory browsing in IIS) connect. directory (options. base [0])] ;}; // project configuration (Task configuration) grunt. initConfig ({// read our project configuration and store it to p Pkg: grunt in the kg attribute. file. readJSON ('package. json '), // create a static server connection: {options: {// port: 8000 on the server port number through the connect task, // The server address (you can use the host name localhost, IP addresses can also be used.) hostname: 'localhost', // physical path (default. (root directory) Note: Use '. 'or '.. 'If it is a path, 403 Forbidden may be returned. change the value to a relative path such as/grunt/reloard. Base: '.'}, livereload: {options: {// use the LiveReload script to reload the page. Middleware: lrMiddleware }}, // you can use the watch task to check whether the file has changed watch: {client: {// you do not need to configure additional tasks, the watch task has built-in LiveReload browser to refresh the code snippet. Options: {livereload: lrPort}, // '**' indicates that all subdirectories are included. // '*' indicates that all files are included. files :['*. html ', 'css/*', 'js/* ', 'images/**/*']}); // grunt. initConfig configuration is complete // load the plug-in grunt. loadNpmTasks ('grunt-contrib-connection'); grunt. loadNpmTasks ('grunt-contrib-Watch'); // customize the task grunt. registerTask ('live', ['connect ', 'Watch']);};

5. Execute: grunt live

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

Running "watch" task
Waiting...

Note: If you have installed the LiveReload browser plug-in before executing this command, you must disable it.

6. Open our page, for example:Http: // localhost: 8000/OrHttp: // 127.0.0.1: 8000/
Note: The address of the local server opened here is the address of the static file server we just set up through connect, instead of the address of the Web server you set up by yourself using IIS or Apache.

The above section describes how to use the Grunt plug-in LiveReload to automatically refresh pages (two solutions.