gulp module methods

1. src()
The src method of the gulp module is used to generate data streams. Its parameters represent the files to be processed, and these specified files will be converted into data streams.

js/app.js 指定确切的文件名
js/*.js 某个目录所有后缀名为js的文件
js/**/*.js 某个目录及其所有子目录中所有后缀名为js的文件
！js/app.js 除了js/app.js以外所有文件
*.+(js css)匹配项目根目录下，所有后缀名为js或css的文件

The parameter of the src method can also be an array, used to specify multiple members

gulp.src(['js/**/*.js','!js/**/*.min.js'])

2 dest()
dest method writes the output of the pipeline Input the file and continue to output these outputs, so you can call the dest method multiple times in sequence to write the output to multiple directories. If any directory does not exist, it will be rebuilt.

gulp.src('./client/templates/*.jade')
      .pipe(jade())
      .pipe(gulp.dest('./build/template'))
      .pipe(minify())
      .pipe(gulp.dest('./build/minified_templates'));

dest method can also accept a second parameter, indicating that the configuration object

gulp.dest('build',{
 cwd:'./app',
 mode:'0644'})

The configuration object has two fields. The cwd field specifies the base directory for writing the path, the default is the current directory; the mode field specifies the permission to write the file, the default is 0777.
3.task()
task method is used to define specific tasks. Its first parameter is the task name, and the second parameter is the task function.

gulp.task('greet',function(){
  console.log('Hello world');
});

The task method can also specify a set of tasks to be run in sequence

gulp.task('build',['css','js','imgs']);

Specify the task build, which consists of three tasks: css, js, and imgs. The task method will execute these three tasks concurrently. Note that each task is called asynchronously, so there is no way to guarantee the time when the js task starts running.

If you want each task to run strictly in order, you can write one task as a dependent module of the next task.

gulp.task('css',['greet'],function(){
  //deal with css here});

The css task depends on the greet task, so css will definitely run after greet is completed.

The callback function of the task method can also accept a function as a parameter, which is very useful for executing asynchronous tasks.

//执行shell命令var exec=require('child_process').exec;
gulp.task('jekyll',function(cb){//build jekyllexec('jekyll build',function(err){
 if(err) return cb(err);//return error
 cb();//finished task})
})

If the name of a task is default, it indicates that it is the default task. Enter the gulp command directly on the command line to run the task.

gulp.task('default',function(){
  //default task})//或者gulp.task('default',['styles','jshint','watch']);

When executing, using gulp directly will run the three tasks of styles, jshint, and watch.

4 watch()
The watch method is used to specify the files that need to be monitored. Once these files are changed, the specified task is run.

gulp.task('watch',function(){
  gulp.watch('templates/*.tmpl.html',['build']);
});

The code specifies that once the template file in the templates directory changes, the build task will be run.

The watch method can also use a callback function to replace the specified task

gulp.watch('templates/*.tmpl.html',function(event){
 console.log('Event type: '+event.type);
 console.log('Event path: '+event.path);
});

Another way to write it is that when the files monitored by the watch method change (modify, add, delete files), it will To trigger the change event, you can specify a callback function for the change event

var watcher=gulp.watch('templates/*.tmpl.html',['build']);
watcher.on('change',function (event){ console.log('Event type: '+event.type); console.log('Event path: '+event.path);
});

In addition to the change event, the watch method may also trigger the following events
end Triggered when the callback function completes running
error Triggered when an error occurs
ready Triggered when starting to monitor the file
nomatch Triggered when there is no matching monitoring file

watcher object It also contains some other methods
watcher.end() stops the watcher object and will no longer call the task or callback function
watcher.files() returns the files monitored by the watcher object
watcher.add(glob) adds the desired The monitored file can also be attached with a second parameter, indicating the callback function
watcher.remove(filepath) removes a monitored file from the watcher object

5.gulp-livereload module
gulp-livereload module is used to automatically refresh the browser to reflect the latest changes in the source code. In addition to modules, it also requires the installation of plug-ins in the browser to cope with source code changes.

var gulp=require('gulp'),
     less=require('gulp-less'),
     livereload=require('gulp-livereload'),
     watch=require('gulp-watch');
gulp.task('less',function(){
   gulp.src('less/*.less')
        .pipe(watch("less/*.less") )
        .pipe(less())
        .pipe(gulp.dest('css'))
        .pipe(livereload());
})

The code is used to monitor the less file. Once the compilation is completed, the browser will be automatically refreshed.

6 gulp-load-plugins module

Generally, the modules in gulpfile.js need to be loaded one by one

var gulp=require('gulp'),
    jshint=require('gulp-jshint'),
    uglify=require('gulp-uglify'),
    concat=require('gulp-concat');
 gulp.task('js',function(){  return gulp.src('js/*.js')
           .pipe(jshint())
           .pipe(jshint.reporter('default'))
           .pipe(uglify())
           .pipe(concat('app.js'))
           .pipe(gulp.dest('build'));
})

Except for gulp in the code In addition to the module, three other modules are also loaded

This loading method is more troublesome. Use the gulp-load-plugins module to load all gulp modules in the package.json file.

var gulp=require('gulp'),
 gulpLoadPlugins=require('gulp-load-plugins'),
 plugins=gulpLoadPlugins();
 gulp.task('js',function(){ return gulp.src('js/*.js')
  .pipe(plugins.jshint())
  .pipe(plugins.jshint.reporter('default'))
  .pipe(plugins.uglify())
  .pipe(plugins.concat('app.js'))
  .pipe(gulp.dest('build'));
})

This article explains the method of the gulp module. For more related content, please pay attention to the PHP Chinese website.

Related recommendations:

js generates html as images and saves them locally

Three ways to define functions in js

"True and False" in JS

The above is the detailed content of gulp module methods. For more information, please follow other related articles on the PHP Chinese website!