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