解锁 Gulp 的潜力：高级技巧与工作流优化

引言

在上一篇文章中，我们已经对 Gulp 的核心概念与基础语法有了初步认识。接下来，让我们更进一步------深入 Gulp 的"高级语法"与进阶技巧，解锁更流畅、更高效的前端工作流。

一、`series()` 与 `parallel()`

series(): 串行执行。将任务按顺序逐一执行，前一个任务完成后，后一个任务才会开始。
parallel(): 并行执行。同时开始执行所有任务，最大化利用系统资源，执行速度更快。

构建一个完整的 build 任务

假设我们有以下任务：

clean: 清理旧的构建文件
compileJS: 编译 JavaScript
optimizeImages: 压缩图片

一个合理的构建流程应该是：首先清理目录，然后并行处理 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开发干货

解锁 Gulp 的潜力：高级技巧与工作流优化

引言

一、series() 与 parallel()

二、条件处理

总结

一、`series()` 与 `parallel()`