引言
在上一篇文章中,我们已经对 Gulp 的核心概念与基础语法有了初步认识。接下来,让我们更进一步------深入 Gulp 的"高级语法"与进阶技巧,解锁更流畅、更高效的前端工作流。
一、series()
与 parallel()
series()
: 串行执行。将任务按顺序逐一执行,前一个任务完成后,后一个任务才会开始。parallel()
: 并行执行。同时开始执行所有任务,最大化利用系统资源,执行速度更快。
构建一个完整的 build
任务
假设我们有以下任务:
clean
: 清理旧的构建文件compileJS
: 编译 JavaScriptoptimizeImages
: 压缩图片
一个合理的构建流程应该是:首先清理目录,然后并行处理 JS 和图片,因为这两者互不依赖。
javascript
const { src, dest, series, parallel } = require('gulp');
const {deleteSync} = require('del');
//const babel = require('gulp-babel');
//const imagemin = require('gulp-imagemin');
// 1. 清理任务
async function clean() {
await deleteSync(['dist/*/']);
}
// 2. JS 编译任务
function compileJS() {
return src('src/**/*.js')
.pipe(dest('dist/js'));
}
// 3. 图片优化任务
async function optimizeImages() {
await new Promise((resolve, reject) => {
src('src/**/*.{png,jpg}')
.pipe(dest('dist/images'))
.on('end', resolve)
.on('error', reject);
});
}
// 4. 使用 series 和 parallel 组合任务
// 首先执行 clean,然后并行执行 compileJS 和 optimizeImages
const build = series(clean, parallel(compileJS, optimizeImages));
// 导出任务,以便在命令行中执行
exports.build = build;
exports.default = build; // 运行 gulp 时默认执行 build 任务
现在,在命令行运行 gulp
或 gulp build
,任务就会按照我们设计的、高效且有序的流程执行。
二、条件处理
gulp-if
插件可以让我们有条件地应用 Gulp 插件。

javascript
const { src, dest } = require('gulp');
const gulpif = require('gulp-if');
const uglify = require('gulp-uglify');
var condition = function (file) {
// TODO: add business logic
return true;
}
function processJS() {
return src('src/js/**/*.js')
.pipe(gulpif(condition, uglify()))
.pipe(dest('dist/js'));
}
除了
gulp-if
进行条件处理之外,还有很多其它非常有用的库,比如gulp-ignore
忽略文件,gulp-beautify
美化代码等等,更多有意思插件可以查看官网
总结
如果你喜欢本教程,记得点赞+收藏!关注我获取更多JavaScript开发干货