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-cli
npm 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())
});

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