[gulp] The difference between series() and parallel(), common tasks

1. Example of task execution chain in Gulp 3

// 默认任务，执行scripts和styles这两个任务
gulp.task('default', ['scripts', 'styles'], function() {
    
    ...});
 
// scripts 和 styles 任务都调用了 clean 任务
gulp.task('styles', ['clean'], function() {
    
    ...});
gulp.task('scripts', ['clean'], function() {
    
    ...});
 
// Clean 任务清空了build目录
gulp.task('clean', function() {
    
    ...});

2. Task execution function in Gulp 4

Gulp 4 drops dependency parameters and replaces them with execution functions:

gulp.series is used for serial (sequential) execution
gulp.parallel is used for parallel

execution The execution order of the above figure is: A, then B, then C and D are executed in parallel, and finally E.
Both functions accept two parameters:

• the name of the task to execute
• function to be executed

3. Example explanation

gulp.task('styles', gulp.parallel('clean', function() {
    
    ...}));
gulp.task('scripts', gulp.parallel('clean', function() {
    
    ...}));
 
gulp.task('clean', function() {
    
    ...});
 
gulp.task('default', gulp.parallel('scripts', 'styles'));

It can be seen from this method that parallel execution is used. Before the scripts task and styles task are executed, the clean task will be executed first, which may cause the problem that the output of the scripts task may be deleted. We can first use the series method to optimize it:

gulp.task('styles', gulp.series('clean', function() {
    
    ...}));
gulp.task('scripts', gulp.series('clean', function() {
    
    ...}));
 
gulp.task('clean', function() {
    
    ...});
 
gulp.task('default', gulp.parallel('scripts', 'styles'));

The above method is similar to the execution process below, and clean will still be executed twice in parallel:

But the effect we want is this:

We can finally optimize it a bit further:

// 去掉了clean任务依赖
gulp.task('styles', function() {
    
    ...});
gulp.task('scripts', function() {
    
    ...});
 
gulp.task('clean', function() {
    
    ...});
 
// Per default, start scripts and styles
gulp.task('default',
  gulp.series('clean', gulp.parallel('scripts', 'styles'),
  function() {
    
    ...}));

4. Common tasks

const  gulp=require('gulp');    //引用gulp
const  del=require('del');      //引用gulp删除插件
const  uglify=require('gulp-uglify');　　//引用压缩Js插件
const  css=require('gulp-clean-css');　　//gulp压缩css文件
const  rename = require("gulp-rename");　　//引用重命名插件
var babel = require('gulp-babel');   // 获取babel模块
var concat = require("gulp-concat");

//task()：定义任务
//src():源文件
// pipe():管道流，接通源头文件与目标文件的输出
// dest():输出文件的目的地
// watch():监视文件

//示例：
gulp.task('hello',done => {
    
         //定义一个hello任务
    console.log('hello')
    done()
});

// 1、复制单个文件
gulp.task('copyHtml',function () {
    
    
    return gulp.src('./test.js').pipe(gulp.dest("./test2"))
});
 
// 2、复制多个文件
gulp.task('copyAllHtml',function () {
    
    
    return gulp.src("./src/utils/*.js").pipe(gulp.dest('./copy'));
});
 
// 3、复制指定文件
// [指定的文件已，指定的文件2]
gulp.task('copy2Js',function () {
    
    
    return gulp.src(["./test.js",'./test2/test.js'])
    .pipe(gulp.dest("./test3"))
});
 
// // 4、某个文件
// // ！排队的文件
gulp.task("copyNoJs",function () {
    
    
    return gulp.src(['./src/store/*.js','!./src/utils/utils.js'])
        .pipe(gulp.dest('./copyNoJs'))
});
 
// 5、复制多个后缀名的图片
// {选项一，选项二}
gulp.task("copyImage",function () {
    
    
    return gulp.src('./src/assets/*.{png,jpg,bmp,jpeg,gif}')
        .pipe(gulp.dest('./copyimg'))
});
 
// 6、执行多个任务
// gulp.task('任务名称',[任务依赖的模块],回调函数)
// 依赖任务之间没有顺序之分，异步执行
// 依赖任务之间完成后，在执行当前的回调函数
gulp.task('build',gulp.series(['hello','copyHtml','copyAllHtml','copy2Js'], done => {
    
    
    console.log('编译成功')
    done()
}));
 
// 7、Watch:监视文件的变化
gulp.task('myWatch',function () {
    
    
    gulp.watch('./index.html',['build'])
});
 
// // 8、删除文件
gulp.task("del",done => {
    
    
    // del('./dist/public/img/*.{jpg,png,jepg,gif}')
    // *：所有文件
    // **：所有文件夹
    del(['./test.js']);
    done()
});
gulp.task('clean', function() {
    
    
    return del(['build/!*']);
});
 
gulp.task('default', gulp.series('del', function() {
    
     
    // default task code here
}));


//因为在压缩js时，uglify 这个模块不支持es6的语法，所以可以先用babel把代码编译成es5
gulp.task("babel", function () {
    
    
    return gulp.src("./src/utils/*.js")// ES6 源码存放的路径
      .pipe(babel()) 
      .pipe(gulp.dest("./es5")); //转换成 ES5 存放的路径
  });
 
// 9、压缩js文件
gulp.task('ysjs',function(){
    
    
    return gulp.src('./src/utils/*.js')
    .pipe(uglify())
    .pipe(gulp.dest('./ysjs'));
 
});
 
//10、 添加监听
gulp.task('watch_js',function(){
    
    
    return gulp.watch('./src/utils/*.js',function() {
    
    
        console.log('js变化');
        //继续执行其他任务
    })
 
});
 
//11、压缩css文件
gulp.task('css',function () {
    
    
    return gulp.src('./src/style/*.less')
        .pipe(css())
        .pipe(gulp.dest('./yscss'))
});
//添加监听
gulp.task('jtCss',function () {
    
    
    return gulp.watch('./src/style/*.less',function() {
    
    
        console.log('css修改');
        gulp.src('./src/style/*.less')
        .pipe(css())
        .pipe(gulp.dest('./yscss'))
    })
});
//12、重命名css文件
gulp.task('reName',function () {
    
    
    return gulp.src('./src/style/common.less')
        // .pipe(rename({suffix: 'test.less'}))
        .pipe(rename('test.less'))
        .pipe(css())
        .pipe(gulp.dest('./rename'))
});

//13、代码合并
gulp.task("concat", function () {
    
    
    gulp.src("src/js/*.js")
        .pipe(concat("main.js")) //后面要写合并后的文件名
        .pipe(uglify()) //可以在后面跟代码压缩
        .pipe(gulp.dest("dist/js"))
});