当您为网站构建构建流程时，查看其他人的流程非常有用。我前几天偶然发现了 Andrew Welch 的 “前端 Web 开发的带注释的 webpack 4 配置”，很高兴他写了博客。如果我要启动一个新的网站，并且想要一个 webpack 构建，那么我几乎肯定会参考类似的东西，而不是从头开始。同时，这让我意识到构建流程都有如此不同的需求，以及这些需求与几年前 Grunt 和 Gulp 构建流程鼎盛时期的需求有多么独特。
我一直在寻找一个带注释的 Gulp 参考文件，并偶然发现了 Andrew 的另一篇文章——“用于前端开发自动化的 Gulp 工作流程”——来自仅仅一年前！以下是他在使用 Gulp 时所做工作的简化列表（他在文章中更详细地解释了这些工作）
- 编译 Sass
- 运行 Autoprefixer
- 创建 Sourcemaps
- 压缩
- 注入关键 CSS 和脚本片段
- 运行 Babel
- Uglify
- 执行样式注入/重新加载
- 运行可访问性审核
- 生成图标字体
- 优化图像
说到 Gulp 和带注释的构建流程，我正在处理 CSS-Tricks 的重新设计，并且由于各种原因，选择了 Gulp 构建。违背我的意愿，我从头开始编写它，并且 这是我到目前为止的成果。它感觉并不特别健壮或高效，因此欢迎重写和建议！说到 Gulp，这里有一个最近发布的样板，我希望在开始之前就看到它。
现在，一年后，构建流程需要执行以下操作
- 运行配置不同的 Web 服务器
- 热模块替换
- 动态代码分割
- 延迟加载
- 创建现代和旧版代码包
- 缓存清除
- 创建服务工作者
- 编译 PostCSS
- 优化图像 / 创建 .webp
- 处理 .vue 文件
- 运行 Tailwind 和 PurgeCSS
事物变化的速度真快。我们本质上仍然在寻求帮助来编译文件和优化事物，但是我们使用的工具变了，我们编写的代码变了，我们谈论开发的方式变了，对开发的期望变了，最佳实践也变了……让人压力山大。😅
我离成为 Gulp 大师还差得远，但我发现的一个插件让我的 Gulp 文件更容易使用，那就是 gulp-load-plugin。它很好，因为您在使用之前不需要手动分配每个插件。您只需执行以下操作
var gulp = require (“gulp”);
// 将 $ 分配给 gulp-load-plugins
var $ = require(”’gulp-load-plugins”)();
// 现在使用任何其他 gulp 插件
// .pipe($.some-plugin()
// 因此，gulp-sass 变成 $.sass()
这里有一个不错的文章：https://andy-carter.com/blog/automatically-load-gulp-plugins-with-gulp-load-plugins
我也从头开始编写 Gulp 文件，并花费了大量时间来完善它。然后 Gulp v4 发布了，很多事情都变了。之后我决定寻找像 https://github.com/ahmadawais/WPGulp 这样的样板，它有很好的注释，因此您可以了解其工作原理。