Build real-time preview development environment with Grunt-contrib-connect real-time Refresh

This article basically refers to using grunt and livereload to build real-time preview of the development environment, and directly realize the real-time preview file list, content page. No need to refresh the page, this is more than the previous development of the Web program is simple.

The Grunt plugin to be used here is

Grunt-contrib-connect, used to act as a static file server, integrates the Livereload function itself
Grunt-contrib-watch, monitor the file changes, and then perform the specified task, which is used to refresh grunt serve the open page

The following is an auxiliary plug-in

Load-grunt-tasks, easy plug-ins, with this can not write a bunch of grunt.loadNpmTasks(‘xxx‘) , and then a lot of tasks only need to write one require(‘load-grunt-tasks‘)(grunt) .

The referenced documentation mentions the Time-grunt plug-in, which can be used to display the time and percentage spent on each task, as this example basically takes up a total of time on the watch task.

Here are two basic files for the Grunt project

1. Package.json

{ "name":  "Test_connect",  "version":  "0.0.1",  "devdependencies": {< Span class= "indent" >  "grunt-contrib-connect": < Span class= "string" > "~0.6.0",   " Grunt-contrib-watch ": " ~0.5.3 ",   "load-grunt-tasks":  "~0.3.0" }              /span>              

Run npm install the download installation above dependencies

2. Gruntfile.js

Module.exports = function (grunt) {Require' Load-grunt-tasks ') (grunt);Load all the Tasks  Require (' Time-grunt ') (grunt); If you want to use the Time-grunt pluginGrunt.initconfig ({ Connect: {  Options: {   Port9000,   Hostname‘*‘,The default is this value, can be configured as a native ip,localhost or domain name   Livereload:35729The port declared to watch monitoring  },  Server: {   Options: {    OpenTrueAutomatically open Web page/HTTP/     Base: [      ' App 'Home Directory    ]   }  } }, Watch: {  Livereload: {   Options: {    Livereload:' <%=connect.options.livereload%> 'Listen for the previously declared port 35729   },   Files: [Changes to the following file will refresh the Web page in real time     ' App/*.html ',     ' App/style/{,*/}*.css ',      app/ Scripts/{,*/}*.js ',       ' app/images/{,*/}*.{ Png,jpg} '       } } Grunt.registertask ( ' serve ', [   ' Connect:server ',              

Now that we have a static file Web server configured, run the command

Grunt serve

will automatically open the browser to access http://0.0.0.0:9000, and then a watch has been listening for changes to the file. If there is index.html in the app directory, browse the file, and the file directory list is displayed without an index file.

This article original link http://unmi.cc/grunt-contrib-connect-build-livereload-dev-env/, from Yehuang Unmi Blog

This is a responsive design page

Abbreviation Browser width

This time in the app directory to add, delete the relevant types of files will be reflected in the above http://0.0.0.0:9000 page, that is, the file list can be refreshed in real-time.

Now we want a more extreme real-time page content preview, we open a page above, such as http://0.0.0.0:9000/test.html, however, we will edit the contents of the test.html file to see whether the page can be previewed in real time.

You should not be able to see the real-time changes on the page, for real-time preview we have to do something, see here https://github.com/gruntjs/grunt-contrib-watch#live-reloading there are two ways:

1. In the page that needs real-time preview, add

<src="Http://localhost:35729/livereload.js" ></script>   

Note the corresponding host and port number

2. Install browser extensions, including Safari, Chrome and Firefox, click on the link how does I install and use the browser extensions? Installation. This will not introduce the above script on the page.

Now look at the real-time preview effect

Grunt-connect can also be combined with grunt-connect-proxy to make local proxies to access other domain names API without dealing with cross-domain issues, and then experience the next grunt-connect-proxy.

Build real-time preview development environment with Grunt-contrib-connect real-time Refresh