解锁 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 任务

现在,在命令行运行 gulpgulp 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开发干货

相关推荐
无羡仙10 分钟前
Webpack 背后做了什么?
javascript·webpack
roamingcode1 小时前
Claude Code NPM 包发布命令
前端·npm·node.js·claude·自定义指令·claude code
码哥DFS1 小时前
NPM模块化总结
前端·javascript
灵感__idea2 小时前
JavaScript高级程序设计(第5版):代码整洁之道
前端·javascript·程序员
唐璜Taro2 小时前
electron进程间通信-IPC通信注册机制
前端·javascript·electron
陪我一起学编程3 小时前
创建Vue项目的不同方式及项目规范化配置
前端·javascript·vue.js·git·elementui·axios·企业规范
LinXunFeng4 小时前
Flutter - 详情页初始锚点与优化
前端·flutter·开源
GISer_Jing4 小时前
Vue Teleport 原理解析与React Portal、 Fragment 组件
前端·vue.js·react.js
Summer不秃4 小时前
uniapp 手写签名组件开发全攻略
前端·javascript·vue.js·微信小程序·小程序·html
coderklaus4 小时前
Base64编码详解
前端·javascript