Detailed Grunt Plug-in livereload implementation page automatic refresh (two kinds of scheme) _php instance

Project One: Grunt-livereload + Chrome Plug-in

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

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

To execute a command:

Copy Code code as follows:

NPM Install--save-dev Grunt-contrib-watch connect-livereload

2. Install browser plugin: Chrome livereload

3. Configure a Web server (iis/apache), Livereload needs to run in a local server environment ( not very good for file:///file path support).

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. Implementation: Grunt Live

See the following prompts to indicate that you have started a listening task:

Copy Code code as follows:

Running "Watch" task
Waiting ...

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

7. Click on the icon of the Chrome Livereload plugin, when the small dot in the center of the icon Circle becomes solid, which indicates the successful implementation of the plugin. at this time you change the site file to see, is not real-time update?

Programme two: Grunt-contrib-watch + grunt-contrib-connect + grunt-livereload

Advantages: Automatically build a static file server, do not need to build a Web server on their own computers.
No browser plugin support is required (not currently in a browser).
You do not need to manually add Livereload.js to your Web page.
Disadvantage: For those who have just contacted, the configuration is slightly more complicated.

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

To execute a command:

Copy 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's default port number, you can also change to the port number you want var lrport = 35729; Using 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}); Using middleware (middleware), you must turn off the Livereload browser plugin var lrmiddleware = function (connect, options) {return [//script, inject to static text Lrsnippet,///static file server path Connect.static (options.base[0]),//Enable directory browsing (equivalent to directory browsing in IIS) Connect.directory (Opti
 Ons.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 Connect task, create A static server connect: {options: {//server port number port:8000,//server address (can use host name localhost, also can use IP) hostname: ' Loca Lhost ',//physical path (default to. That is, root) Note: use '. ' or '.. ' As a path, the 403 forbidden may be returned.
    Change the value to a relative path such as:/grunt/reloard.
   Base: '. ' }, Livereload: {options: {//via livereload script, letThe page is reloaded. Middleware:lrmiddleware}},//Through watch tasks, to listen for changes to the file watch: {client: {//We do not need to configure additional tasks, watch task has been built inside
    Livereload the code fragment that the browser refreshes. Options: {Livereload:lrport},//' * * ' indicates that all subdirectories//' * ' representations contain all files: [' *.html ', ' css/* ', ' js/* ', ' images/**/* ']}});
 Grunt.initconfig configuration completed//Load plugin grunt.loadnpmtasks (' Grunt-contrib-connect ');
 Grunt.loadnpmtasks (' Grunt-contrib-watch ');
Custom Task Grunt.registertask (' Live ', [' Connect ', ' watch ']);
 };

5. Implementation: Grunt Live

See the following prompts to show that the Web server is complete and that the listening task begins:

Copy 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 have just built through connect instead of using IIS or Apache to build your Web server address.

The above is this article detailed grunt plug-in livereload implementation page automatic refresh (two kinds of scheme), hope everybody likes.