需要在目录下定义gulpfile.js文件 作为gulo入口文件
gulp中的任务需要手动标识任务结束
```
exports.foo = done => { console.log('foo task') done() // 标识任务完成}
// 默认任务
exports.default = done => { console.log('default task') done()}
// gulp 4.0前 需要task函数来注册任务
const gulp = require('gulp')
gulp.task('bar', done => {
console.log('bar')
done()
})```
Gulp组合任务
通过series和parallel组合多个任务
series是串行任务 执行一个再一个
parallel是并行任务 会全部任务一起执行
组合任务可以嵌套组合
const { series, parallel } = require('gulp')
exports.task1 = done => {
console.log('task1')
done()
}
exports.task2 = done => {
console.log('task2')
done()}exports.task3 = done => {
console.log('task3')
done()
}
exports.foo = series(task1, task2, task3) // 执行一个再一个
exports.bar = parallel(task1, task2, task3) // 一起执行
Gulp 异步任务
Gulp中异步任务支持JavaScript中3种异步任务的处理方式和node环境的stream方式
const { series, parallel } = require('gulp')
exports.task1 = done => {
console.log('task1')
done()
}
exports.task2 = done => {
console.log('task2')
done()}exports.task3 = done => {
console.log('task3')
done()
}
exports.foo = series(task1, task2, task3) // 执行一个再一个
exports.bar = parallel(task1, task2, task3) // 一起执行
自动化构建核心
自动化构建工程的核心分为 读取 转换 写入
这个过程在Gulp是流的方式来完成，Gulp是一个基于流来构建的系统，可以在转换流中加入各种插件来实现效果
Gulp文件操作API
Gulp中提供了很好的文件操作API（src、dest），可以通过src来读取文件得到读取流，再使用Gulp的插件来实现转换流工作，最后用dest完成写入操作
// 实现这个项目的构建任务
const { src, dest } = require('gulp')
// 自动引入gulp的插件
const loadPlugins = require('gulp-load-plugins')
const plugins = loadPlugins()
// 清理任务 清除dist的文件
exports.style = () => {
// src读取文件
return src('src/assets/styles/*.scss', { base: 'src' })
// 这里进行转换流操作
.pipe(plugins.sass({ outputStyle: 'expanded' }))
// dest写入文件
.pipe(dest('dist'))
}
一个gulp例子
