【gulp】series()和parallel()的区别，常用任务

一、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() {...});

二、Gulp 4中的任务执行函数

Gulp 4抛弃了依赖参数（dependency parameter），用执行函数来代替：

gulp.series 用于串行（顺序）执行
gulp.parallel 用于并行执行

上图的执行顺序是：A, 然后 B, 然后 C 和 D 并行执行, 最后 E。
这两个函数都接受两个参数：

• 要执行的任务的名字
• 需要执行的函数

三、示例讲解

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

这个方法可以看到，都是用了parallel并行执行，在执行scripts任务和styles任务前，clean任务会先执行，这就可能导致scripts任务的输出可能会被删掉的问题。我们可以先用series方法优化一下：

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

以上方法类似下方的执行过程，clean还是会并行执行两次：

但是我们想要的效果是这样的：

我们可以再最终优化一下：

// 去掉了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() {...}));

四、常用任务

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