Compare gulp and Grunt

grunt

Grunt is file-based. After a task is executed, a temporary file is generated. Other tasks are executed based on the temporary file

gulp

Gulp is a stream using Nodejs

1. Get stream 2 via gulp.src(). Import the stream into the plugin using the pipe() method. 3. Import the stream into gulp.dest() using the pipe() methodCopy the code

———— Task (), SRC (), dest(), and watch()

1.gulp.src()To get the stream

gulp.src(globs[, Gulp.src (['js/*.js',' CSS /*.css','*.html'])// Gulp.src ([*.js,'! B *.js']) // matches all js files, but excludes js files starting with b. Gulp.src (['! B *.js',*.js]) // does not exclude any files, because the exclusion pattern cannot appear in the first element of the arrayCopy the code

2.gulp.dest()It’s for writing files

Gulp.dest (path[,options]) path specifies the directory for the file to be generatedCopy the code

3.gulp.task()Used to define tasks

Gulp. Task (name[, deps], fn) name is the task name. Deps is an array of other tasks that the task currently defined depends on. Then the DEPS parameter fn can be omitted as the task function. Gulp.task ('mytask', ['array', 'of', 'task', 'names'], function() {// Define a dependent task // Do something});Copy the code

Tips: It can also be used to control the order in which several tasks are executed

Gulp. Task ('default',['one','two','three']);Copy the code

Tips2: Wait until the asynchronous operations in the asynchronous task are complete before performing subsequent tasks

Refer to https://www.cnblogs.com/2050/p/4198792.htmlCopy the code

4.gulp.watch()Monitor file changes, and when the file changes, we can use it to perform corresponding tasks, such as file compression

Gulp. Watch (glob[, opts], Tasks) Glob is the matching mode of the file to be monitored. Tasks is an array of tasks to be executed after the file changesCopy the code

Tips: Information to monitor file changes

// The object contains information about file changes. // The type attribute indicates the type of changes. Gulp.watch ('*.js', function(event){console.log(event.type); // Added indicates added,deleted indicates deleted, and changed indicates changed console.log(event.path). // Change the file path});Copy the code