使用 Gulp 压缩静态资源：从零到自动化的构建实践

在现代 Web 开发中，资源的压缩和优化是提高网站性能的关键。通过减少 CSS、JavaScript 和 图片 的文件体积，可以显著降低 HTTP 传输损耗，从而加速页面首屏渲染。

虽然 Webpack 和 Vite 目前在大型应用中占据主流，但对于传统的静态网页、营销页面或简单的多页应用，Gulp 凭借其“基于流”的简单直观，依然是最高效的自动化工具之一。

什么是 Gulp 的“流”？

Gulp 最大的特点是使用 Node.js 的 Stream（流）。

与 Grunt 将中间结果写入临时磁盘文件不同，Gulp 在内存中通过 .pipe() 将数据流从一个插件传递到另一个插件，这种方式极大地提高了构建速度。

一、 环境准备与安装

在使用 Gulp 之前，请确保你的系统已安装 Node.js。

1. 初始化项目： 在项目根目录下生成 package.json：

npm init -y

2. 本地安装 Gulp 核心库： 不要仅仅全局安装，项目本地安装是必须的，以确保版本一致性：

npm install --save-dev gulp gulp-cli

二、 核心插件安装

针对不同的资源压缩需求，我们需要安装以下经过社区验证的成熟插件：

一键安装：

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. 压缩 JavaScript
function minScript() {
    return src('assets/js/*.js')
        .pipe(uglify())
        .pipe(dest('dist/assets/js'));
}

// 2. 压缩 CSS
function 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. 压缩 HTML
function 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 命令后，项目会经历以下转换过程：

1. 读取 (src)：定位原始的开发文件。
2. 转换 (pipe)：

• uglify 将变量名缩短并删除 JS 中的空格。
• cleanCSS 移除 CSS 冗余字符。
• imagemin 重新编码图片，移除元数据。

3. 输出 (dest)：将优化后的文件存放到 dist 目录。

五、 避坑指南与进阶建议

1. 路径匹配：使用 **/*.js 可以匹配子目录下的所有文件。
2. 清除旧文件：建议在构建前先删除 dist 目录，可以使用 del 模块实现。
3. Source Maps：在压缩代码的同时，建议生成 Source Map 文件，以便在浏览器调试时能看到原始源码位置。
4. 图片优化限制：gulp-imagemin 对环境有一定要求（如二进制库），如果安装失败，可尝试使用 gulp-tinypng-compress 等在线压缩 API 插件。

总结

Gulp 是一个极具生命力的工具。通过简单的 gulpfile.js 配置，我们可以将原本枯燥的手工压缩工作自动化，确保上线前每一字节资源都得到了最优化处理。