Using Gulp to automate Web page refreshes: gulp-connect

Getting Started Guide 1. Global Installation Gulp:

NPM Install--global Gulp

2. As a project development-dependent (devdependencies) installation:

NPM Install--save-dev Gulp

3. Under the project root directory, create a name of gulpfile.jsThe File:

var gulp = require (' gulp '); gulp.task (' default ', function () {  //put your default task code in this});

4. Run Gulp:

Gulp

The default task, named default, will be run, where the task is not doing anything.

To perform a specific task individually (task), enter gulp <task> <othertask> .

Business

Role

Think about it, before the development of the front-end, if JS or CSS or other files have any changes, the page will automatically load, do not have to manually press Ctrl+R or what F5, is not very cool. Recommended today, is such a plugin: gulp-connect, it can not only automatically start a web server, but also to achieve the above-mentioned hot load function

Installation

The premise is that you are already installed,, and nodejs gulp npm have a basic understanding of their use. And the project has been initialized and the gulpfile.js file is ready package.js .
If you don't know anything about it, get to know it.
Installation Command:

NPM Install--save-dev Gulp-connect

Use the default parameters to create a server:

var gulp = require (' gulp '),  connect = require (' gulp-connect '); gulp.task (' connect ', function () {  Connect.server ();}); Gulp.task (' default ', [' connect ']);

Monitor and Refresh automatically

Monitoring the root directory under the app directory of all the HTML files, if there is a change, then automatically refresh, if you need to monitor the LESS,SASS,CSS,JS and so on, please automatically according to gourd painting scoop!

var gulp = require (' Gulp '),  = require (' gulp-connect '); gulp.task (function () {  connect.server ({    ' app ',    true  }); gulp.task ( function () {  gulp.src ('./app/*.html ')    . pipe (connect.reload ());}); gulp.task (  function  () {  gulp.watch (['./app/*.html '], [' html ']); gulp.task (' default ', [' Connect ', ' Watch ']);

Starting and shutting down the server

function () {  connect.server ({    8888  });   //  /////  Balabala can do a lot of things   connect.serverclose ();}); 

Monitor all html,css,js files in the current directory

varGulp = require (' gulp ')), Connect= Require (' gulp-connect '); Gulp.task (' Connect ',function() {connect.server ({root:‘./‘, Livereload:true    });  }); Gulp.task (' HTML ',function() {gulp.src ('./*.html '). Pipe (connect.reload ());  }); Gulp.task (' CSS ',function() {gulp.src ('./*.css '). Pipe (connect.reload ());  }); Gulp.task (' JS ',function() {gulp.src ('./*.js '). Pipe (connect.reload ());  }); Gulp.task (' Watch ',function() {gulp.watch (['./*.html ', './*.css ', './*.js '], [' html ', ' css ', ' js ']); }); Gulp.task (' Default ', [' connect ', ' watch '];

Using Gulp to automate Web page refreshes: gulp-connect