Gulp API Introduction

I. Introduction of GULP API

Gulp itself can do very few things, mainly through the plug-in to provide a variety of functions, gulp itself only provides 4 very simple API, master these 4 APIs you basically mastered the gulp of all.

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

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

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

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

Ii. gulp.src (globs[, Options])

Description: Returns the current specified file stream to the available plug-in.

Globs: Source file match path that needs to be processed. Type (required): String or Stringarray.

Wildcard Path Matching Example:

1, "src/index.js": Specify specific documents;

2, "{}": matches multiple attributes. Example: Src/{a,b}.js (contains A.js and b.js files) src/*. {Jpg,png,gif} (Contains all jpg/png/gif files under SRC);

3. "!": excludes the specified file. Example:!src/index.js (does not include the Index.js file under SRC);

4, "*.SCSS": * Number matches any file in the current directory, so here *.scss match all scss files in the current directory;

5. "**/*.scss": Matches all scss files under the current directory and its subdirectories;

6, "*.+ (Scss|sass)": After the + number will be followed by parentheses, the elements of the inside with | Split, matching multiple options. This will match the SCSS and sass files;

Options: Type (optional): Object with 3 properties of buffer, read, base.

1, Options.buffer: type: Boolean default: True set to False, will return the stream of file.content and do not buffer files, processing large files is very useful;

2, Options.read: type: Boolean default: True sets False, the read file operation will not be performed, return null;

3. Options.base: Type: String sets the output path to be stitched backwards based on some part of a path;

Example:

GULP.SRC ([' Js/*.js ', ' css/*.css ', ' *.html '])  //using arrays to match multiple files 
 gulp.src ([' Src/*.js ', '!src/b*.js '])   Match all JS files, but exclude the JS file starting with B gulp.src (['!src/b*.js ', ' src/*.js ')  //will not exclude any files, because the exclusion mode cannot appear in the first element of the array 
 Gulp.src (' Src/js/**/*.js ', {base: ' src '})  //all path names after preserving the src path 
 gulp.src ([' less/**/*.less ', '!less/{extend,page}/*.less '])  //matches all less files under the less directory and subdirectories, but excludes all less files under the Extend and page directories under the less directory   
   

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

Description: The Dest method is to specify the path to the file output after processing is finished.

Path: Type (required): String or function specifies the file output path, or the function returns the file output path.

Options: Type (optional): Object, with 2 properties CWD, mode.

1, OPTIONS.CWD: type: String default: PROCESS.CWD (): The path of the working directory of the pre-script, only valid when the given output directory is relative to the path;

2, Options.mode: type: String default: 0777 Specifies the permission to create the folder;

PS: We give Gulp.dest () passed the path parameter, can only be used to specify the directory of the file to be generated, but not to specify the file name of the generated file, it generates the file name using the file name imported into its file stream itself, so the generated file name is determined by the stream imported to it, Even if we give it a path parameter with a file name, then it also takes the file name as the directory name. to change the file name, you can use the Gulp-rename plugin.

Example:

The resulting file path is dist/foot.js/jquery.js, not dist/foot.js
GULP.SRC (' Script/jquery.js ')
. Pipe (Gulp.dest (' dist/foot.js '));

The last file path generated is Dist/**/*.js
If **/*.js matches to a file that is jquery/jquery.js, the resulting file path is Dist/jquery/jquery.js
GULP.SRC (' script/**/*.js ')//The part of the path with wildcards starting to appear is **/*.js
. Pipe (Gulp.dest (' dist '));

The last file path generated is Dist/avalon.js
GULP.SRC (' script/avalon/avalon.js ')//No wildcard occurrences
. Pipe (Gulp.dest (' dist '));

Assume that the file that matches to is script/util/underscore.js
The last file path generated is Dist/util/underscore.js
GULP.SRC (' script/**/underscore.js ')//The part of the path with wildcards starting to appear is **/underscore.js
. Pipe (Gulp.dest (' dist '));

Assume that the file that matches to is script/zepto.js
The last file path generated is Dist/zepto.js
GULP.SRC (' script/* ')//The part of the path with wildcards appearing is *
. Pipe (Gulp.dest (' dist '));

Set this pattern to match to the file app/src/css/normal.css
Replace the base path with Dist and eventually get Dist/css/normal.css
GULP.SRC (' app/src/**/*.css ')//The value of base at this time is app/src, that is, its base path is APP/SRC. Pipe (Gulp.dest (' dist '));

Assume that the file that matches to is script/lib/jquery.js
The resulting file path is Build/jquery.js
GULP.SRC (' script/lib/*.js ')//does not have the base parameter configured, the default base path is Script/lib
. Pipe (Gulp.dest (' Build '));

Assume that the file that matches to is script/lib/jquery.js
The file path generated at this time is build/lib/jquery.js
GULP.SRC (' Script/lib/*.js ', {base: ' script '})//configured with base parameter, at which point the base path is script
. Pipe (Gulp.dest (' Build '));

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

Description: The task method defines a gulp task.

Name: type (required): String, specifying the name of the task (there should be no spaces).

deps: type (optional): Stringarray, the task depends on the task (note: The dependent task needs to return the current task's event stream), as an array. Tasks that are currently defined begin execution after all dependent tasks have been completed. If there is no dependency, you can omit this parameter.

fn: type (required): Function, the plug-in action called by the task.

Example:

// Define a task that is not dependent on 
 Gulp.task (' CSS ', function () {
    return gulp.src ([' less/style.less ') 
     & nbsp  .pipe (Less ()) 
        .pipe (Gulp.dest ('./css ')); 
}); 
 
//define a dependent task 
 Gulp.task (' mincss ', [' CSS '], function () {         //perform mi after performing the CSS task NCSS tasks 
    return gulp.src ([' css/*.css ']) 
        .pipe (Minifycss ()) 
   & nbsp    .pipe (Gulp.dest ('./dist/css ')); 
}); 
 
//define a default task with multiple dependencies 
 Gulp.task (' Default ', [' css ', ' concat ', ' minifycss ');  //just perform the default task is equivalent to "CSS", "Concat", "Minifycss" The three tasks are executed 
  

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

Note: The watch method is used to listen for file changes, and a modification of the file will perform the specified task.

glob: Source file match path that needs to be processed. Type (required): String or Stringarray.

opts: type (optional): object, which is an optional configuration object, is usually not needed.

tasks: Type (required): Stringarray, an array of names of tasks that need to be performed.

CB (Event): type (optional): function each file changes the execution of callback functions. Whenever a monitored file changes, the function is called, and it is passed to an object that contains some information about the change of the file, the Type property is a variable, the added, the changed, and the Deleted;path property is the path to the file that changed.

Example:

Gulp.task (' watch-less ', function () {
Gulp.watch (' less/**/*.less ', [' CSS ']);
});

Gulp.task (' Watch-js ', function () {
Gulp.watch (' Js/**/*.js ', function (event) {
Some information about the output changing file
Console.log (' File ' + Event.path + ' was ' + Event.type + ', running tasks ... ');
});
});

This article from "Luo Chen's Blog" blog, reproduced please contact the author!

Gulp API Introduction