875 字
4 分钟
使用 Gulp 压缩静态资源：从零到自动化的构建实践
在现代 Web 开发中，资源的压缩和优化是提高网站性能的关键。通过减少 CSS、JavaScript 和 图片 的文件体积，可以显著降低 HTTP 传输损耗，从而加速页面首屏渲染。
虽然 Webpack 和 Vite 目前在大型应用中占据主流，但对于传统的静态网页、营销页面或简单的多页应用，Gulp 凭借其“基于流”的简单直观，依然是最高效的自动化工具之一。
什么是 Gulp 的“流”？
Gulp 最大的特点是使用 Node.js 的 Stream（流）。
与 Grunt 将中间结果写入临时磁盘文件不同，Gulp 在内存中通过 .pipe() 将数据流从一个插件传递到另一个插件，这种方式极大地提高了构建速度。
一、 环境准备与安装
在使用 Gulp 之前，请确保你的系统已安装 Node.js。
- 初始化项目：
在项目根目录下生成
package.json：
npm init -y- 本地安装 Gulp 核心库： 不要仅仅全局安装，项目本地安装是必须的，以确保版本一致性：
npm install --save-dev gulp gulp-cli二、 核心插件安装
针对不同的资源压缩需求，我们需要安装以下经过社区验证的成熟插件：
| 插件名 | 作用 |
|---|---|
| gulp-uglify | 混淆并压缩 JavaScript 文件 |
| gulp-clean-css | 压缩 CSS 文件 |
| gulp-imagemin | 优秀的图片压缩工具（替代 smushit） |
| gulp-htmlmin | 压缩 HTML 文件 |
一键安装：
npm install --save-dev gulp-uglify gulp-clean-css gulp-imagemin gulp-htmlmin三、 编写 gulpfile.js (Gulp 4.0 语法)
在 Gulp 4.0 中，任务定义建议使用命名函数并导出的方式，同时使用 series（串行）和 parallel（并行）来控制执行逻辑。
const { src, dest, parallel, series } = require('gulp');const uglify = require('gulp-uglify');const cleanCSS = require('gulp-clean-css');const imagemin = require('gulp-imagemin');const htmlmin = require('gulp-htmlmin');
// 1. 压缩 JavaScriptfunction minScript() { return src('assets/js/*.js') .pipe(uglify()) .pipe(dest('dist/assets/js'));}
// 2. 压缩 CSSfunction minCSS() { return src('assets/css/*.css') .pipe(cleanCSS({ compatibility: 'ie8' })) /* Image of CSS minification comparing original code and minified code */ .pipe(dest('dist/assets/css'));}
// 3. 压缩图片function minImg() { return src('assets/img/**/*.{jpg,png,gif,svg}') .pipe(imagemin([ imagemin.mozjpeg({ quality: 75, progressive: true }), imagemin.optipng({ optimizationLevel: 5 }) ])) .pipe(dest('dist/assets/img'));}
// 4. 压缩 HTMLfunction minHTML() { return src('*.html') .pipe(htmlmin({ collapseWhitespace: true, removeComments: true, minifyJS: true, minifyCSS: true })) .pipe(dest('dist'));}
// 5. 文件监听：开发必备function watchTask() { const gulp = require('gulp'); gulp.watch('assets/css/*.css', minCSS); gulp.watch('assets/js/*.js', minScript); gulp.watch('*.html', minHTML);}
// 导出任务exports.scripts = minScript;exports.styles = minCSS;exports.images = minImg;exports.html = minHTML;
// 默认任务：并行执行所有压缩任务exports.default = parallel(minScript, minCSS, minImg, minHTML);四、 构建流程分析
在执行 gulp 命令后，项目会经历以下转换过程：
- 读取 (src)：定位原始的开发文件。
- 转换 (pipe)：
uglify将变量名缩短并删除 JS 中的空格。cleanCSS移除 CSS 冗余字符。imagemin重新编码图片，移除元数据。
- 输出 (dest)：将优化后的文件存放到
dist目录。
五、 避坑指南与进阶建议
- 路径匹配：使用
**/*.js可以匹配子目录下的所有文件。 - 清除旧文件：建议在构建前先删除
dist目录，可以使用del模块实现。 - Source Maps：在压缩代码的同时，建议生成 Source Map 文件，以便在浏览器调试时能看到原始源码位置。
- 图片优化限制：
gulp-imagemin对环境有一定要求（如二进制库），如果安装失败，可尝试使用gulp-tinypng-compress等在线压缩 API 插件。
总结
Gulp 是一个极具生命力的工具。通过简单的 gulpfile.js 配置，我们可以将原本枯燥的手工压缩工作自动化，确保上线前每一字节资源都得到了最优化处理。
使用 Gulp 压缩静态资源：从零到自动化的构建实践
https://sw.rscclub.website/posts/gulp/