gulp module methods-JS Tutorial-php.cn

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的文件

Copy after login

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

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

Copy after login

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

Copy after login

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

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

Copy after login

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

Copy after login

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

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

Copy after login

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

Copy after login

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}) })

Copy after login

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']);

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

In addition to the change event, the watch method may also trigger the following events
endTriggered when the callback function completes running
errorTriggered when an error occurs
readyTriggered when starting to monitor the file
nomatchTriggered 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()); })

Copy after login

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

Copy after login

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

Copy after login

gulp module methods