Shulou(Shulou.com)06/03 Report--

This article mainly explains the "Grunt plug-in LiveReload how to achieve automatic page refresh", the article explains the content is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "Grunt plug-in LiveReload how to achieve page automatic refresh" bar!

Option 1: grunt-livereload + Chrome Plug-in

Advantages: simple and convenient installation and configuration.

Cons: need to cooperate with the specified browser plug-in (Firefox also has related plug-ins, IE you know).

1. 2 plugs need to be installed: grunt-contrib-watch and connect-livereload

Execute the command:

The copy code is as follows:

Npm install-save-dev grunt-contrib-watch connect-livereload

two。 Install the browser plug-in: Chrome LiveReload

3. To configure a Web server (IIS/Apache), LiveReload needs to run in a 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 plug-in grunt.loadNpmTasks ('grunt-contrib-watch'); / / Custom task grunt.registerTask (' live', ['watch']);}

5. Execute: grunt live

The following prompt indicates that the monitoring task has started:

The copy code is as follows:

Running "watch" task

Waiting...

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

7. Then click the ICON of the Chrome LiveReload plug-in, and the dot in the center of the ICON circle becomes solid, indicating the successful execution of the plug-in. At this time, you change the website file to see if it is updated in real time?

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

Advantages: automatically build a static file server, do not need to build a Web server on your own computer.

There is no need for browser plug-in support (not currently defined in a browser).

There is no need to manually add livereload.js to the web page.

Disadvantages: for people who are new to contact, the configuration is slightly complicated.

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

Execute the command:

The copy code is as follows:

Npm install-save-dev grunt-contrib-watch grunt-contrib-connect connect-livereload

two。 Modify the Gruntfile.js file:

Module.exports = function (grunt) {/ / the default port number of LiveReload, you can also change it to the port number you want var lrPort = 35729; / / use the connect-livereload module to generate a script with LiveReload / / var lrSnippet = require ('connect-livereload') ({port: lrPort}) / / to use middleware (middleware), you must close LiveReload's browser plug-in var lrMiddleware = function (connect, options) {return [/ / inject scripts into static files lrSnippet, / / static file server path 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'), / / create a static server connect: {options: {/ / server port number port: 8000, / / server address (hostname localhost can be used) through the connect task You can also use IP) hostname: 'localhost', / / physical path (default. (root directory) Note: use'.' Or'.' For a path, 403 Forbidden may be returned. At this point, change the value to a relative path such as: / grunt/reloard. Base:'.'}, livereload: {options: {/ / reload the page through the LiveReload script. Middleware: lrMiddleware}}, / / use the watch task to listen to whether the file has been changed watch: {client: {/ / We do not need to configure additional tasks, the watch task has built-in code snippets for LiveReload browser refresh. Options: {livereload: lrPort}, / /'* * 'means include all subdirectories / /' * 'means include all files files: [' * .html', 'css/*',' js/*', 'images/**/*']}); / / grunt.initConfig is configured / / load plug-in grunt.loadNpmTasks (' grunt-contrib-connect') Grunt.loadNpmTasks ('grunt-contrib-watch'); / / Custom task grunt.registerTask (' live', ['connect',' watch']);}

5. Execute: grunt live

See the following prompt to indicate that the Web server has been built and start the listening task:

The copy 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 a browser plug-in installed with LiveReload, you must close it.

6. Open our page, such as 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 using IIS or Apache to build your own Web server address.

Thank you for your reading, the above is the "Grunt plug-in LiveReload how to achieve automatic page refresh" content, after the study of this article, I believe you on the Grunt plug-in LiveReload how to achieve page automatic refresh this problem has a deeper understanding, the specific use of the situation also needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.