Gulp using Notes

Gulp Introduction

Gulp is a NODEJS-based automatic task runner that automates the testing, checking, merging, compressing, formatting, automatic browser refresh, and deployment file generation of JAVASCRIPT/COFFEE/SASS/LESS/HTML/IMAGE/CSS and other files. And listen for files that repeat the specified steps after the change. In the implementation, gulp borrowed from the UNIX operating system pipeline (pipe) idea, is the previous level of output, directly into the back-level input, making it very simple to operate.

Installation

Gulp is a node-based automatic task runner, so you need to install node beforehand.

1. Global Installation Gulp:

$ NPM Install--global Gulp

2. You need to create a profile in the root directory of the project Gulpfile.js:

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

3. Run Gulp:

$ gulp

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

Specific tasks (Task) need to be performed separately and input is required gulp <task> <othertask> .

Api

Gulp introduces four APIs on Git:,,, task and dest src watch beyond, Gulp provides a run way.

1.GULP.SRC (globs[, Options])

src()The method is to specify the path of the source file to be processed, gulp borrowed from the UNIX operating system pipe (pipe) idea, the previous level of output, directly into the back-level input, GULP.SRC return the current file stream to the available plug-in.

Parameters:

Globs: Source file match path to be processed

Options: There are 3 properties in buffer, read, base

globsDescription of the file match:

"Src/a.js": Specify specific documents;

"*": Match All Files Example: Src/*.js (contains all JS files under SRC);

"* *": matches 0 or more sub-folders example: Src/**/*.js (contains the SRC 0 or more subfolders under the JS file);

' {} ': Match multiple attribute examples: Src/{a,b}.js (contains A.js and b.js files) src/*. {Jpg,png,gif} (All jpg/png/gif files under SRC);

“!” : Exclude File Example:!src/a.js (does not contain src under the a.js file);

options.buffer: Type: Boolean default: True to False, returns the stream of file.content and does not buffer files, which is useful when working with large files;

options.read: Type: Boolean default: True sets False, the read file operation is not performed and Null is returned;

options.base: Type: String , will be added before Glob

Imagine that in a directory with a path client/js/somedir , there is a file called somefile.js :

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

2.gulp.dest (path[, Options])

The Dest () method specifies the path to the output of the file after processing is completed

Path: Specify the file output path, or define the function return file output path can also

Options: Two properties, CWD and Mode

OPTIONS.CWD: Type: String default: process.cwd(). The output directory cwd parameter is valid only when the given output directory is relative to the path.

Optoins.mode: Type: String default: 0777. octal permission character, which defines all permissions for directories created in the output directory.

Gulpfile.js like this:

var gulp = require (' Gulp '); Gulp.task (function() {    gulp.src ('./js/test.js ') )    . Pipe (Gulp.dest ('./build ');});

The gulp.dest(‘./build‘) ls -al directory is created automatically by moving the new Test.js file to the build directory and comparing the commands two times before and after dest() .

3.gulp.task (name[, Deps], FN)

This method is used to create a gulp task.

Parameter description:

Name: If you need to run some tasks on the command line, do not use spaces in the name.

Deps: Type: Array. An array that contains a list of tasks that are completed before the current task is run.

function () {  //  do some things });

Note: does the task run before these pre-dependent tasks are completed? Make sure that the tasks in the task list that you depend on are using the correct asynchronous execution method: Use a callback, or return a promise or stream.

fn: This function defines some of the actions that the task will perform. Generally speaking, it would be this form: gulp.src().pipe(someplugin()) .

If FN can receive callback, or return a promise or stream, the task can execute asynchronously:

Receive callback:

// execute a command in the shell var exec = require (' child_process '). Exec;gulp.task (function(CB) {  //  compile Jekyll  function(err) {    ifreturn//  return error    //  Complete task  });

Return stream:

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

Return to Promise:

var Q = require (' q '); Gulp.task (function() {  var deferred = q.defer ();   // performing an asynchronous operation  SetTimeout (function() {    deferred.resolve ();   1);   return deferred.promise;});

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

Used to listen for file changes, a modification of the file will perform the specified task.

Parameter description:

Glob: Type: String or Array, an glob string, or an array of multiple glob strings, used to specify which files are specifically monitored for changes.

Opts:object, passed to the gaze parameter.

Tasks: Type: The Array, name of one or more tasks that need to be executed after a file change has been gulp.task() created.

CB: Type: Function, callback to be performed for each change.

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 ... ');});

The callback is passed to a named event object. This object describes the changes that are monitored:

Event.type: Type: The String, type of change that occurs: added , changed or deleted .

Event.path: Type: The String, path of the file that triggered the event.

Gulp Plug-in

Gulp plug-ins are many, here you can see the complete list.

Gulp using Notes