Gulp API

In this section, we take a look at the API methods in Gulp, as follows:

method	description
src()	Create a stream for reading Vinyl objects from the file system
dest()	Create a stream for writing Vinyl objects to the file system
symlink()	Create a stream to connect Vinyl objects to the file system
lastRun()	Retrieve the last time the task was successfully completed in the current running process
series()	Combine task functions and/or combined operations into larger operations, which will be executed in sequence
parallel()	Combine task functions and/or combined operations into larger operations that are executed simultaneously
watch()	Listen to globs and run tasks when changes occur
task()	Define tasks in the task system
registry()	Allows to insert a custom registry into the task system in order to provide shared tasks or enhanced functions
tree()	Get the current task dependency tree-it is needed in rare cases
Vinyl	Virtual file format
Vinyl.isVinyl()	Check whether an object is a Vinyl instance
Vinyl.isCustomProp()	Determine whether a property is managed internally by Vinyl

When we use gulp, we generally only need 4 APIs, namely gulp.src(), gulp.dest(), gulp.task(), and gulp.watch(). Below we will introduce one of these 4 commonly used APIs in detail. Use of API.

gulp.src() method

The gulp.src() method is used to create a stream. But it should be noted that the content in this stream is not the original file stream, but a virtual file object stream (vinyl files), this virtual file object stores the original file path, file name, content and other information.

The syntax is as follows:

gulp.src(globs, [options])

• globs: File matching mode (type regular expression), used to match file paths (including file names), or you can directly specify a specific file path.
• options: Optional parameters, usually do not need to be used.

Example:

For example, in the following example, copy the .js files in the input folder to the output folder:

const { src, dest } = require('gulp');

function copy() {
  return src('input/*.js')
    .pipe(dest('output/'));
}

exports.copy = copy;

After executing the gulp copy command, the file was successfully copied.

gulp.dest() method

The gulp.dest() method can create a stream for writing Vinyl objects to the file system.

The syntax is as follows:

gulp.dest(path[ , options])

• path: is the path to write the file.
• options: Optional parameter object, usually not used.

The gulp.dest() method is used in conjunction with the gulp.src() method, such as the above example of copying files.

The use process of gulp is generally: first obtain the file stream we want to process through the gulp.src() method, then import the file stream into the gulp plugin through the pipe method, and finally import the stream after the plugin processing through the pipe method To gulp.dest(), the gulp.dest() method writes the contents of the stream to the file.

Note that the path parameter passed to gulp.dest() can only be used to specify the directory of the file to be generated, but not the file name of the generated file. The file name of the generated file uses the file stream imported to it Its own file name, so the generated file name is determined by the file stream imported into it.

gulp.task() method

The gulp.task() method is used to define tasks in the task system, and then the defined tasks can be accessed from the command line and APIs such as series(), parallel(), and lastrun().

The syntax is as follows:

gulp.task( name [ , deps ] , fn )

• name: The name of the task.
• deps: It is an array of other tasks that the currently defined task needs to depend on. The currently defined task will be executed after all dependent tasks have been executed. If there is no dependency, you can omit this parameter.
• fn: Optional parameter. It is the task function. We write all the code to be executed by the task in it.

Example:

There are several usages of task() method:

• Register the named function as a task, where the function name test is the task name:

const { task } = require('gulp');

function test(cb) {
  console.log("命令函数")
  cb();
}

task(test);

• Register the anonymous function as a task:

const { task } = require('gulp');

task('test', function(cb) {
  console.log("匿名函数")
  cb();
});

• Retrieve previously registered tasks:

const { task } = require('gulp');

task('test', function(cb) {
  cb();
});

const test = task('test');

gulp.watch() method

The gulp.watch() method is used to monitor file changes. When the file changes, we can use it to perform corresponding tasks, such as file compression.

The syntax is as follows:

gulp.watch(glob [ , opts] , tasks)

• glob: Match the pattern for the file to be monitored. The rules and usage are the same as the glob in the gulp.src() method.
• opts: is an optional configuration object, usually not needed.
• tasks: the tasks to be executed after the file changes, an array.

Example:

For example, use the gulp.watch statement to monitor file changes:

const { watch } = require('gulp');

watch(['input/*.js', '!input/one.js'], function(cb) {
  cb();
});