Detailed grunt plug-in livereload implementation of automatic page refresh (two scenarios) _php instance

Scenario One: Grunt-livereload + Chrome Plug-in

Advantages: Simple and convenient installation and configuration.
Disadvantage: need to cooperate with the specified browser plugin (Firefox also has relevant plug-ins, ie, you understand).

1. Need to install 2 mating parts: Grunt-contrib-watch, Connect-livereload

Execute command:

Copy the Code code as follows:
NPM Install--save-dev Grunt-contrib-watch connect-livereload

2. Install the browser plugin: Chrome livereload

3. Configure a Web server (iis/apache), livereload need 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) {//project configuration (Task Configuration) grunt.initconfig ({  Pkg:grunt.file.readJSON (' Package.json '),  Watch: {   client: {    files: [' *.html ', ' css/* ', ' js/* ', ' images/**/* '],    options: {     livereload:true    }   }  } }); Load plugin grunt.loadnpmtasks (' Grunt-contrib-watch '); Custom Task Grunt.registertask (' Live ', [' Watch ']);

5. Execution: Grunt Live

See the following tips to indicate that you have started the Monitoring task:

Copy the Code code as follows:
Running "Watch" task
Waiting ...

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

7. Click on the Chrome Livereload plugin icon and the small dot in the center of the icon Circle becomes solid, indicating that the plug-in execution was successful. at this time you change the website file to see, is not real-time update?

Scenario Two: Grunt-contrib-watch + grunt-contrib-connect + grunt-livereload

Advantages: Automatically set up a static file server, do not need to build a Web server on their own computer.
Browser plugin support is not required (not currently available in a browser).
You do not need to add livereload.js to the page manually.
Cons: The configuration is slightly more complex for people who are just touching.

1. Install the 3 plugins we need: Grunt-contrib-watch, Grunt-contrib-connect, Connect-livereload

Execute command:

Copy the Code code 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 The default port number, you can also change to the port number you want var lrport = 35729;//Use the Connect-livereload module to generate an L Ivereload script//var Lrsnippet = require (' Connect-livereload ') ({port:lrport});   With middleware (middleware), you must close Livereload's browser plugin var lrmiddleware = function (connect, options) {return [//Insert script into a static file Lrsnippet,//path to the static file server Connect.static (Options.base[0]),//Enable 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 in the pkg attribute Pkg:grunt.file.readJSON (' Package.json '),//Through the Connect task, create a static    Server connect: {options: {//server port number port:8000,//server address (can use host name localhost, can also use IP) hostname: ' localhost ', Physical path (the default is. That is, the root directory) Note: use '. ' or ' ... ' 403 Forbidden may be returned as a path.    The value is changed to a relative path such as:/grunt/reloard.   Base: '. '     }, Livereload: {options: {//through Livereload script, let the page reload. Middleware:lrmiddleware}},//Watch task to listen for changes to the file watch: {client: {//We don't need to configure additional tasks, watch task has been built Liverel Oad BrowseThe code snippet that the device refreshes. Options: {Livereload:lrport},//' * * ' means containing all subdirectories//' * ' means containing all files: [' *.html ', ' css/* ', ' js/* ', ' I mages/**/* ']}}); Grunt.initconfig configuration Completed//Loading plugin grunt.loadnpmtasks (' Grunt-contrib-connect '); Grunt.loadnpmtasks (' Grunt-contrib-watch '); Custom Task Grunt.registertask (' Live ', [' Connect ', ' watch ']);

5. Execution: Grunt Live

See the following tips to show that the Web server is set up and listening for tasks:
Copy the Code code 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 a browser plugin that has Livereload installed, you must close it.

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 that we just built via connect, not the Web server address you built yourself with IIS or Apache.

The above is the detailed grunt plug-in livereload implementation of the page automatically refresh (two kinds of programs), I hope you like.

