使用指南：gulp-rev-all静态资产版本管理

使用指南：gulp-rev-all静态资产版本管理

gulp-rev-all Static asset revisioning with dependency considerations, appends content hash to each filename (eg. unicorn.css => unicorn.098f6bcd.css), re-writes references. 项目地址: https://gitcode.com/gh_mirrors/gu/gulp-rev-all

---

项目介绍

gulp-rev-all 是一个基于 Gulp 的静态资产版本控制系统，特别设计用于处理依赖关系考虑下的文件修订。它通过向每个文件名追加内容散列（如 unicorn.css => unicorn.098f6bcd.css），并重写对这些文件的所有引用，确保了静态资源的有效缓存更新。这使得利用HTTP缓存策略变得更加高效，新老访客都能体验到快速加载速度，并且支持内容分发网络（CDN）上的远端缓存。

项目快速启动

要迅速启用 gulp-rev-all，首先确保你的开发环境中已安装 Node.js 和 Gulp。接下来，遵循以下步骤：

安装

通过npm或yarn添加 gulp-rev-all 到你的项目作为开发依赖：

npm install --save-dev gulp-rev-all
# 或者使用yarn
yarn add --dev gulp-rev-all

配置Gulp任务

在你的Gulpfile中配置一个任务来实现文件修订及引用重写：

const gulp = require('gulp');
const RevAll = require("gulp-rev-all");

gulp.task('default', function () {
    return gulp.src("dist/**")
        .pipe(RevAll.revision())
        .pipe(gulp.dest("cdn"));
});

此例中，“dist”目录下的所有文件将被修订，修订后的文件及更新过的引用将放置到“cdn”目录下。

应用案例和最佳实践

结合CDN部署

如果你正将修订后的文件部署至CDN，可以进一步优化流程，例如：

const gulp = require('gulp');
const RevAll = require("gulp-rev-all");
const awspublish = require("gulp-awspublish");
const cloudfront = require("gulp-cloudfront");

// 设置AWS参数
var aws = {...};

var publisher = awspublish.create(aws);
var headers = {"Cache-Control": "max-age=315360000, no-transform, public"};

gulp.task('deploy', function () {
    return gulp.src("dist/**")
        .pipe(RevAll.revision())
        .pipe(awspublish.gzip())
        .pipe(publisher.publish(headers))
        .pipe(publisher.cache())
        .pipe(awspublish.reporter())
        .pipe(cloudfront(aws));
});

这个例子展示了如何发布修订后的文件到Amazon S3并通过CloudFront进行CDN加速，同时设置适合长期缓存的头部信息。

典型生态项目

虽然gulp-rev-all自身是专注于Gulp的工作流中的静态资产管理和版本控制，它通常与其他Gulp插件结合使用，比如gulp-sass、gulp-minify等，以构建完整的前端构建流程。在大型项目中，gulp-rev-all可能与构建系统内的包管理器（如Webpack）、自动化工具（比如Gulp或Grunt）共同工作，形成一个全面的前端开发和部署生态系统。

当与版本管理系统（如Git）一起使用时，确保只将原始未修订的源文件提交到仓库，修订文件应由CI/CD流程在部署阶段自动生成，保持源代码库的清晰度和可维护性。

在实际应用中，选择合适的时间运行gulp-rev-all是非常关键的，确保所有的文件都已经生成，避免重复修订或者错过新增文件的问题。这需要仔细规划你的Gulp任务顺序，确保编译任务先于修订任务执行。

gulp-rev-all Static asset revisioning with dependency considerations, appends content hash to each filename (eg. unicorn.css => unicorn.098f6bcd.css), re-writes references. 项目地址: https://gitcode.com/gh_mirrors/gu/gulp-rev-all