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

Source: Internet
Author: User
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) (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

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
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.

  • Related Article

    Contact Us

    The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

    If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.