gulp4 深入学习笔记

一、task, 任务的两种写法

使用函数

const {task, series} = require('gulp')

function say1(done) {
    console.log(1)
    // 不加done()，则任务say1完成后，不会再调用say2
    done() 
}

function say2(done) {
    console.log(2)
    done()
}

exports.task1 = series(say1, say2)

使用task()

const {task, series} = require('gulp')

task('say1', done=>{
     console.log(1)
     done()
})

task('say2', done=>{
     console.log(2)
     done()
})

exports.task1 = series('say1', 'say2')

每个任务都会接受一个回调函数做为参数，不处理的话，就会报错
gulp: Did you forget to signal async completion

如果不处理

二、series, parallel, 顺序执行任务和并行执行任务

二者可以相互嵌套,无限嵌套

• 顺序执行：先启动task1,task1完成后，再做task2
• 并行执行: 同时启动task1,task2

series(task1, task2)
parallel(task1, task2)
series(task1, parallel(task2, task3))
parallel(task1,series(task2, task3))

三、src, dest, pipe, 文件管道

• src: 读取文件，输出流
• pipe: 处理流，输出流
• dest: 输入流，输出文件

其中src可以在多处使用，不一定只在开头，dest也可以在在不同阶段输出不同文件

exports.default = function() {
  return src('src/*.js')
    .pipe(babel())
    .pipe(src('vendor/*.js'))
    .pipe(dest('output/'))
    .pipe(uglify())
    .pipe(rename({ extname: '.min.js' }))
    .pipe(dest('output/'));
}

四、glob 路径配置

两个**无限层级匹配

['src/**/*.js', '!src/index2.js']

!是去除匹配项

['src/*.js', '!src/index2.js']

五、plugin 插件

const uglify = require('gulp-uglify'); // 压缩
const rename = require('gulp-rename'); // 重命名
const del = require('delete'); // 删除
const gulpif = require('gulp-if'); // 判断

function isJavaScript(file) {
  // Check if file extension is '.js'
  return file.extname === '.js';
}

.pipe(gulpif(isJavaScript, uglify()))
.pipe(uglify())
.pipe(rename({basename: 'main', 'extname': '.min.js'}))

del(['./src/index.js'])

六、watch 监听文件

const { watch, series } = require('gulp');

watch('src/*.css', css);
watch('src/*.js', series(clean, javascript));