gulp 4.0爬坑指南

好久時間沒有用gulp，最近公司有個項目須要優化，使用了gulp處理多文件流，才發現4.0還有這麼多的坑，和舊版比很是不習慣。很少說了，看來還得去刷一遍api。

一、gulp.src裏使用數組會致使遍歷不全問題。

gulp.src(['./*-en-us','./*-zh-hans','./*-zh-tw'])  //致使遍歷不全

//拆分才能遍歷徹底
gulp.src('./*-en-us')
gulp.src('./*-zh-hans')
gulp.src('./*-zh-tw')
複製代碼

二、task寫法徹底改變

舊版

gulp.task('clean',function(){
    ...
})
複製代碼

新版

function clean(cb) {
  cb();
}
//兩種寫法return或ch()回調
function javascript() {
  return  gulp.src(path.join('./*-'+fildNmae))
}
複製代碼

三、watch監聽寫法已改變

舊版監聽

gulp.task('watch',function(){
    gulp.watch('./stylesheets/**/*.scss',['sass','css']);
})
複製代碼

4.0版本監聽

const { watch, series } = require('gulp');
function clean(cb) {
  cb();
}
//兩種寫法return或ch()回調
function javascript() {
  return  gulp.src(path.join('./*-'+fildNmae))
}
// 能夠只關聯一個任務
watch('src/*.js', javascript);
// 或者關聯一個任務組合
watch('src/*.js', series(clean, javascript));
複製代碼

新版傳參

function copy(fildNmae) {
  return gulp.src(path.join('./*-'+fildNmae))
}
gulp.watch('./src/**/*', { events: 'change' },function(cb){
    copy('zh-hans');
    copy('en-us');
    copy('zh-tw');
    cb();
  })
複製代碼