Auto Build Tool Gulp

Summary:

Gulp, like grunt, are automated build tools. Compared to grunt, it highlights the concept of a stream, and the task is executed one after the other. Share today how to automate with gulp.

Installation:

Gulp is also based on the node environment, so you need to install node. js before installing Gulp.

NPM Install-g Gulp

The installation is completed as soon as you execute the preceding line of commands in the Command window, so that the installation is a global installation. It is generally installed in the project through the Devdependencies property in Package.json. As follows:

{    "name": "",    "version": "0.0.0",    "description": "",    "main": " Gulpfile.js ",    " dependencies ": {},    " Devdependencies ": {        " gulp ":" ~ 3.5.6 "    },    " license ":" ISC "}

Executing the NPM install installs the gulp into the current project.

How to run:

After installing gulp, you need to create a new gulpfile.js file, usually in the root directory of the project, with Package.json. What exactly does it say in the Gulpfile.js file? Of course, some tasks are defined. As follows:

var gulp = require (' Gulp '); Gulp.task (function() {  //  Execute task });

The tasks in the Gulp,default are then executed through the Command window in the current directory.

Configuration parameters: Gulp.src (globs[, Options])

Load the file and stream the file to the plug-in, as follows:

GULP.SRC (' Client/templates/*.jade '). Pipe (Jade ()). Pipe (  minify ())  . Pipe (Gulp.dest (' Build /minified_templates '));

Gulp first loads all the jade files under client/templates/and then passes them to the jade plug-in, the Minify plugin, and then outputs it to build/minified_templates.

Globs

Type: String,array

The file is either a path, and multiple files are in the form of an array.

Options

Type: Object

Gulp passing configuration parameters to node through the options

Options.buffer

Type: BOOL

Default value: False

Whether to return the file as a stream, false to set the contents of the file to be read in a stream, and not cached, is very useful for large file settings caching.

Options.read

Type: BOOL

Default value: True

Sets whether to read files if set to False to never read files

Options.base

Type: String

Set the root directory of the output file as follows:

// Matches ' client/js/somedir/somefile.js ' and resolves ' base ' to ' client/js/'   . Pipe (Minify ())  . Pipe (Gulp.dest (' build '));  // writes ' Build/somedir/somefile.js ' gulp.src (' client/js/**/*.js ', {base: ' client ' }).  pipe (Minify ())  . Pipe (Gulp.dest (' Build '));  // writes ' Build/js/somedir/somefile.js '

Gulp.dest (path[, Options])

Output file can be output to a different directory, if the directory does not exist on the creation, as follows:

Gulp.src ('./client/templates/*.jade ')  . Pipe (Jade ())  . Pipe (Gulp.dest ('./build/templates '))  . Pipe (Minify ())  . Pipe (Gulp.dest ('./build/minified_templates '));

Path

Type: string,function

Set the path to the output file

Options.cwd

Type: String

Default value: PROCESS.CWD ()

The output folder only works if the path is a relative path

Options.mode

Type: String

Default value: 0777

To set permissions for an output file

Gulp.task (name[, Deps], FN)

Define a task, as follows:

function () {  // do stuff});

Name

Task Name, call task is only required Gulp.run (task name)

Deps

Type: Array

The tasks to be relied upon to perform the current task, and the dependent tasks to be performed before the current task executes. Note Asynchronous tasks

Fn

The tasks that need to be performed are defined here

To perform a task asynchronously:

Using Callback functions

// run a command in a shell var exec = require (' child_process '). Exec;gulp.task (function(CB) {  //  Build Jekyll  function(err) {    ifreturn//  return error    //  finished task  });

Returns a file stream

function () {  var stream = gulp.src (' client/**/*.js ')    . Pipe (Minify ())    . Pipe (Gulp.dest ( ' build '));   return stream;});

Using Promise

var Q = require (' q '); Gulp.task (function() {  var deferred = q.defer ();   // Do async Stuff  SetTimeout (function() {    deferred.resolve ();   1);   return deferred.promise;});

Note The task dependencies, here is an example:

varGulp = require (' Gulp '));//takes in a callback so the engine knows when it ' ll is doneGulp.task (' One ',function(CB) {//Do stuff--async or otherwiseCB (ERR);//If ERR is not null and not undefined, the run would stop, and note that it failed});//identifies a dependent task must is complete before this one beginsGulp.task (' Both ', [' one '],function() {    //task ' One ' is do now}); Gulp.task (' Default ', [' One ', ' both '];

Gulp.watch (Glob [, opts], tasks) or Gulp.watch (Glob [, opts, CB])

Listen to the file, and when the file changes, the defined task will be executed. The change event is triggered as the JS file changes.

var watcher = Gulp.watch (' js/**/*.js ', [' uglify ', ' Reload ']), Watcher.on (function( Event) {  console.log (' File ' + Event.path + ' was ' + Event.type + ', running tasks ... ');});

Or:

function (event) {  console.log (' File ' + Event.path + ' was ' + Event.type + ', running tasks ... ');});

　　

Instance:

The following is a simple example, the implementation of JS, CSS compression merge.

Package.json Mounting Module

{    "name": "",    "version": "0.0.0",    "description": "",    "main": "Gulpfile.js",    "dependencies": {},    "Devdependencies": {        "gulp": "~3.5.6",        "gulp-minify-css": "~0.3.0",        "gulp-uglify": "^1.0.0",        "Gulp-concat": "~2.0.0",        "Gulp-rename": "^1.0.0"    },    "license": "ISC"}

Gulpfile.js

varGulp = require (' Gulp '));//Loading ModulesvarMinifycss= Require (' Gulp-minify-css '),//CSS CompressionUglify = require (' gulp-uglify '),//JS CompressionConcat = require (' Gulp-concat '),//Merging FilesRename = require (' Gulp-rename ');// Renaming//merging, compressing, renaming CSSGulp.task (' Min-styles ',function() {GULP.SRC (['./static/css/*.css ']). Pipe (Concat (' All.css '). Pipe (Gulp.dest ('./static/build/css/') . Pipe (rename ({suffix):'. Min '}). Pipe (Minifycss ()). Pipe (Gulp.dest ('./static/build/css '));});//merging, compressing JS filesGulp.task (' min-javascripts ',function() {GULP.SRC ('./static/js/*.js '). Pipe (Concat (' All.js '). Pipe (Gulp.dest ('./static/build/js ') . Pipe (rename ({suffix):'. Min '}). Pipe (Uglify ()). Pipe (Gulp.dest ('./static/build/js '));});//define develop task release or run-time useGulp.task (' Develop ',function() {Gulp.run (' Min-styles ', ' min-javascripts ');});//The Gulp command starts by defaultGulp.task (' Default ',function() {  //listen to the. css file, call Min-styles task execution as soon as there is a changeGulp.watch ('./css/*.css ', [' Min-styles ']); Gulp.run (' Develop ');});

In the Gulpfile.js file directory, the default task executes when Gulp is executed through a command window.

Auto Build Tool Gulp