Gulp 升级4.0 DAY97

由于前面我们都是使用 3.9.1版 来介绍
今天要来介绍 4.0 啦~~

gulp4.0 多了 parallel(同时执行) 与 series(依序执行)

且 parallel 与 series 可同时使用

那么接下来

我们就要介绍如何修改啦

由于输入 gulp -v

会看到 cli 版本为3.9.1

我们必须先将 gulp-cli 降版

输入

npm uninstall -g gulp-clinpm i -g gulp-cli 2.3.0

若无法删除
可参考此网址
https://github.com/gulpjs/gulp-cli/issues/178

注解

gulp.task('sequence', gulpSequence('clean','jade','sass','babel','vendorJS'))// gulp.task('build', ['sequence'])// gulp.task('default',['jade','sass','babel','vendorJS','browser-sync','image-min','watch']);

加入

gulp.task('build',    gulp.series(        'clean',        gulp.parallel('jade','sass','babel')    ))

这里不能把 clean 放进 parallel的原因为
若它同时执行
可能 sass做完 又 clean掉

不过这里会出现几个出错

vendorJS
必须将(先前的bower删除)

gulp.task('vendorJS',function(){    return gulp.src([        './.tmp/vendors/**/**/*.js',        './node_modules/bootstrap/dist/js/bootstrap.bundle.min.js'        ])        .pipe($.order([            'jquery.js',            'bootstrap.js'        ]))        .pipe($.concat('vendors.js'))        .pipe($.if(option.env === 'production',$.uglify()))        .pipe(gulp.dest('./public/js'))});

clean

还有一个错误为 clean 的时候
找不到 public 资料夹
所以必须将 clean
增加

allowEmpty: true

gulp.task('clean', function () {    return gulp.src(['./.tmp','./public'], {read: false,allowEmpty: true})        .pipe(clean());});

jade

由于不知道它是同步或非同步
必须补上一个 return

gulp.task('jade', function() {    return gulp.src('./source/**/*.jade')    .pipe($.plumber())    .pipe($.jade({        pretty: true    }))    .pipe(gulp.dest('./public/'))    .pipe(browserSync.stream())});

那今天的介绍就到这里
若有任何问题 或 内容有误
都可以跟我说唷