gulp-rev 使用教程

gulp-rev 使用教程

gulp-revStatic asset revisioning by appending content hash to filenames: `unicorn.css` → `unicorn-d41d8cd98f.css`项目地址:https://gitcode.com/gh_mirrors/gu/gulp-rev

项目介绍

gulp-rev 是一个用于为静态文件添加版本哈希的 Gulp 插件。通过为文件名添加基于内容的 MD5 哈希值，可以有效解决 CDN 缓存问题，确保用户始终获取到最新的资源文件。此外，gulp-rev 还会生成一个 JSON 文件，用于保存原始文件名与添加哈希后文件名的映射关系。

项目快速启动

安装

首先，确保你已经安装了 Gulp。然后，通过 npm 安装 gulp-rev：

npm install --save-dev gulp-rev

基本使用

在 gulpfile.js 中配置 gulp-rev：

const gulp = require('gulp');
const rev = require('gulp-rev');

exports.default = () => (
  gulp.src('src/*.css')
    .pipe(rev())
    .pipe(gulp.dest('dist'))
);

生成映射文件

为了生成文件名映射表，可以使用 rev.manifest()：

const gulp = require('gulp');
const rev = require('gulp-rev');

exports.default = () => (
  gulp.src('src/*.css')
    .pipe(rev())
    .pipe(gulp.dest('dist'))
    .pipe(rev.manifest())
    .pipe(gulp.dest('dist'))
);

应用案例和最佳实践

案例一：静态资源缓存管理

在项目部署时，使用 gulp-rev 可以确保静态资源（如 CSS、JS 文件）的缓存管理。通过为文件名添加哈希值，可以实现永久缓存，同时确保版本更新时只更新修改的文件。

最佳实践

1. 结合 gulp-rev-collector 使用：为了替换 HTML 文件中的静态资源路径，可以使用 gulp-rev-collector 插件。
2. 合并映射文件：在多次构建过程中，可以通过设置 merge: true 选项来合并映射文件，避免覆盖。

const gulp = require('gulp');
const rev = require('gulp-rev');

exports.default = () => (
  gulp.src(['assets/css/*.css', 'assets/js/*.js'], { base: 'assets' })
    .pipe(gulp.dest('build/assets'))
    .pipe(rev())
    .pipe(gulp.dest('build/assets'))
    .pipe(rev.manifest({ base: 'build/assets', merge: true }))
    .pipe(gulp.dest('build/assets'))
);

典型生态项目

gulp-rev-collector

gulp-rev-collector 是一个与 gulp-rev 配合使用的插件，用于替换 HTML 文件中的静态资源路径。它根据 gulp-rev 生成的映射文件，自动更新 HTML 中的引用路径。

安装

npm install --save-dev gulp-rev-collector

使用

在 gulpfile.js 中配置 gulp-rev-collector：

const gulp = require('gulp');
const rev = require('gulp-rev');
const revCollector = require('gulp-rev-collector');

gulp.task('rev', function () {
  return gulp.src(['dist/rev-manifest.json', 'src/*.html'])
    .pipe(revCollector({ replaceReved: true }))
    .pipe(gulp.dest('dist'));
});

通过以上配置，可以确保 HTML 文件中的静态资源路径被正确替换为带有哈希值的文件名。

---

通过本教程，你应该能够快速上手使用 gulp-rev 进行静态资源版本管理，并了解其最佳实践和相关生态项目。希望这些内容对你有所帮助！

gulp-revStatic asset revisioning by appending content hash to filenames: `unicorn.css` → `unicorn-d41d8cd98f.css`项目地址:https://gitcode.com/gh_mirrors/gu/gulp-rev