Gulp in action

Gulp and grunt, are task automatic management tools, compared to grunt, gulp more useful, more flexible configuration.

1. Installation

Gulp is also based on Nodejs, which can also be installed via NPM,

Global Installation

NPM Install-g Gulp

Installing in a project

NPM Install Gulp--save-dev

2, two examples

Create the Gulp task named Gulpfile.js, which is defined in this file through the Gulp command, and add the following code to the Gulpfile.js:

var gulp =require (' Gulp '), uglify =require (' gulp-uglify '); Gulp.task (' Minify ', function () {gulp.src (' js/app.js '). Pipe (Uglify ()). Pipe (Gulp.dest (' Build ')});

You need to install Gulp-uglify first, the command is as follows:

NPM Install gulp-uglify--save-dev

Then the directory to resume a JS directory, in this directory to build a app.js file, type the content:

function test () {var info= "This is a gulp information" return Info.indexof ("Gulp");}

It's time to look at the effect and then explain the process. The command is as follows:

Gulp Minify

Wait a moment and you will see the following effect:

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M02/5A/34/wKiom1T5UJaSVeiQAABda2AgEXc226.jpg "title=" Qq20150306105943.png "alt=" Wkiom1t5ujasveiqaabda2agexc226.jpg "/>

What is the process like? Let's analyze It first:

First, load the Gulp and Gulp-uglify plug-ins, and then define a task named Minify, which runs the second anonymous method when the task is called. Finally, the code in the method is really the function to implement, Gulp is the flow of the way, from one function point to another function point. The GULP.SRC () parameter is a string that points to one or more files, which creates a stream object to the file, which is passed to the Uglify method, returns a file object containing the compressed code, and then passes the returned object to Gulp.dest (), which is used to save the file.

The above example is to perform a task, if it is more than one task, first look at the following code:

Gulp.task (' JS ', function () {return gulp.src (' js/*.js '). Pipe (Jshint ()). Pipe (Uglify ()). Pipe (Concat (' AP P.js '). Pipe (Gulp.dest (' Build '));});

before running, first installgulp, gulp-jshint, gulp-uglify and gulp-concat. The above code is JSHINT,UGLIFY,CONCAT processed separately.

3. Method explanation

(1) gulp.src ()

This method mainly produces data flow, the parameter is corresponding to one or more strings, generally have several forms:

Js/app.js complete match for a file

Js/*.js matches all JS files in JS directory

Js/**/*.js matches all JS files under the JS folder, including sub-folders

!js/app.js All files except Js/app.js

*.+ (JS|CSS) matches the JS or CSS file in the root directory

(2) Define task

Using Gulp.tash () to define a task, this method takes two parameters when defining a simple task: the name of the task and the method to be executed.

Gulp.task (' Greet ', function () {console.log (' Hello world! '); });

You can also perform a series of tasks:

Gulp.task (' Build ', [' css ', ' js ', ' IMGs ');

The build task consists of three tasks, all of which are executed asynchronously, so there is no guarantee that the JS task will begin executing until the CSS task is finished. If you want to achieve this effect is not impossible, if you want to perform a task before the execution of a task, you can specify the way of dependency, the example illustrates:

Gulp.task (' CSS ', [' greet '], function () {//Deal with CSS here});

The above code means that when the task greet executes, the task CSS starts executing.

(3) The default task

Gulp.task (' Default ', function () {//Your default task});

(4) Monitoring files

Gulp also provides the ability to monitor changes in the contents of a file, running one or more tasks when the file changes.

Gulp.task (' Watch ', function () {gulp.watch (' templates/*.tmpl.html ', [' Build ']);});

When the HTML file in the templates directory changes, the build task is executed. Of course, you can also transform the task above to pass event object events in:

Gulp.watch (' templates/*.tmpl.html ', function (event) {Console.log (' event type: ' + event.type);//added, changed, or D eleted console.log (' Event path: ' + Event.path); The path of the modified file});

Gulp.watch () also has a better feature, is to return a watcher, use watcher to register the event, see an example:

var watcher = Gulp.watch (' templates/*.tmpl.html ', [' Build ']), Watcher.on (' Change ', function (event) {Console.log (' Event type: ' + event.type); Added, changed, or deleted Console.log (' Event path: ' + Event.path); The path of the modified file});

There are, of course, other events in addition to the Change event:

End: No callback function has been set since the file changed

Error: File has errors

Ready: After the file is searched, start monitoring

NoMatch: no match to any file

Watcher also contains other methods: End (), files (), files (), add (), remove ()

4 Plugins

1, Gulp complete plug-in can access http://gulpjs.com/plugins/view, in the previous example we have used Gulp-jshint, gulp-uglify and Gulp-concat plug-in,

var gulp = require (' Gulp '), Jshint = require (' Gulp-jshint '), uglify = require (' gulp-uglify '), concat = require (' G Ulp-concat '); Gulp.task (' JS ', function () {return gulp.src (' js/*.js '). Pipe (Jshint ()). Pipe (Jshint.reporter (' d Efault '). Pipe (Uglify ()). Pipe (Concat (' app.js ')). Pipe (Gulp.dest (' Build '));});

If gulp a lot of plug-ins, a require come in is quite troublesome, like grunt, Gulp also have plug-ins can load all gulp plugins, that is, Gulp-load-plugins:

var gulploadplugins = require (' Gulp-load-plugins '), plugins = Gulploadplugins ();

Of course it can be written in one line

var plugins = require (' Gulp-load-plugins ') ();

This plugin also reads the Gulp plugin from Package.json, assuming that the Package.json devdependencies field has version information for each plugin

{"Devdependencies": {"Gulp-concat": "~2.2.0", "gulp-uglify": "~0.2.1", "Gulp-jshint": "~1.5.1", "G" ULP ":" ~3.5.6 "}}

2. Plugin instance

Gulp-livereload module is used to automatically refresh the browser, reflecting the latest changes in the source code, but with the help of browser plugin

var gulp = require (' gulp '), less = require (' gulp-less '), Livereload = require (' gulp-livereload '), watch = Require (' Gulp-watch '); Gulp.task (' Less ', function () {gulp.src (' less/*.less '). Pipe (watch ()). Pipe (Less ()). PIPE ( Gulp.dest (' CSS ')). Pipe (Livereload ());});

Reference:

http://www.smashingmagazine.com/2014/06/11/building-with-gulp/

Https://github.com/gulpjs/gulp/blob/master/docs/API.md

Https://github.com/vohof/gulp-livereload

This article is from the "Eason's HCC" blog, so be sure to keep this source http://hcc0926.blog.51cto.com/172833/1617954

Gulp in action