解锁 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开发干货

相关推荐
星月心城25 分钟前
Promise之什么是promise?(01)
javascript
二川bro42 分钟前
第二篇:Three.js核心三要素:场景、相机、渲染器
开发语言·javascript·数码相机
Mintopia1 小时前
🧱 用三维点亮前端宇宙:构建你自己的 Three.js 组件库
前端·javascript·three.js
故事与九1 小时前
vue3使用vue-pdf-embed实现前端PDF在线预览
前端·vue.js·pdf
小西↬1 小时前
vite+vue3+websocket处理音频流发送到后端
javascript·websocket·音视频
Mintopia2 小时前
🚀 顶点-面碰撞检测之诗:用牛顿法追寻命运的交点
前端·javascript·计算机图形学
wb1892 小时前
企业WEB应用服务器TOMCAT
运维·前端·笔记·tomcat·云计算
Entropy-Lee3 小时前
JavaScript 语句和函数
开发语言·前端·javascript
Wcowin4 小时前
MkDocs文档日期插件【推荐】
前端·mkdocs