如何获取带哈希的压缩CSS文件路径以实现预加载？

我来帮你解决这个Gulp项目里的难题——要给带哈希的合并CSS加preload标签，关键是利用gulp-rev生成的清单文件来动态获取最终路径，下面是几种实用的方案：

1. 利用gulp-rev生成的清单文件动态替换 #

gulp-rev在处理文件后会默认生成一个rev-manifest.json（你也可以自定义文件名），里面存着原始文件名和哈希后文件名的映射关系。我们可以读取这个文件，然后在HTML中替换占位内容，生成正确的preload标签。

示例Gulp任务流程： #

首先确保你已经完成CSS的合并、压缩，然后用gulp-rev生成带哈希的文件和清单：

const gulp = require('gulp');
const rev = require('gulp-rev');
const cleanCSS = require('gulp-clean-css');
const concat = require('gulp-concat');

// 合并、压缩CSS并生成带哈希的文件及清单
gulp.task('process-css', () => {
  return gulp.src('src/css/**/*.css')
    .pipe(concat('combined.min.css')) // 合并成单个文件
    .pipe(cleanCSS()) // 压缩CSS
    .pipe(rev()) // 生成哈希后缀
    .pipe(gulp.dest('dist/static/assets/css')) // 输出带哈希的CSS
    .pipe(rev.manifest('css-rev-manifest.json')) // 生成单独的CSS清单
    .pipe(gulp.dest('dist')); // 输出清单文件
});

接下来，用gulp-rev-replace插件读取清单，替换HTML中的占位符：

const revReplace = require('gulp-rev-replace');
const htmlmin = require('gulp-htmlmin');

// 处理HTML，插入正确的preload标签
gulp.task('inject-preload', () => {
  // 读取之前生成的CSS清单
  const cssManifest = gulp.src('dist/css-rev-manifest.json');

  return gulp.src('src/index.html')
    .pipe(revReplace({
      manifest: cssManifest,
      // 处理未加哈希的原始路径，替换成preload标签模板
      modifyUnreved: (path) => {
        if (path === 'static/assets/css/combined.min.css') {
          return `<link rel="preload" href="${path}" as="style">`;
        }
        return path;
      },
      // 替换成带哈希的最终路径
      modifyReved: (path) => {
        return `<link rel="preload" href="${path}" as="style">`;
      }
    }))
    .pipe(htmlmin({ collapseWhitespace: true })) // 可选：压缩HTML
    .pipe(gulp.dest('dist'));
});

// 设置任务执行顺序：先处理CSS生成清单，再处理HTML
gulp.task('build', gulp.series('process-css', 'inject-preload'));

在你的原始HTML中，只需要保留一个指向原始合并CSS的引用（或者专门的占位注释），插件会自动把它替换成带哈希的preload标签。

2. 用gulp-inject直接插入带哈希的CSS路径 #

如果你习惯用gulp-inject管理资源注入，可以先从rev清单中提取出带哈希的CSS路径，再注入到HTML的指定位置：

const inject = require('gulp-inject');
const fs = require('fs');

gulp.task('inject-preload-alt', () => {
  // 读取rev清单文件
  const manifest = JSON.parse(fs.readFileSync('dist/css-rev-manifest.json', 'utf8'));
  // 获取带哈希的CSS路径
  const hashedCssPath = `static/assets/css/${manifest['combined.min.css']}`;

  // 创建一个虚拟的文件流，用于inject
  const fakeFileStream = gulp.src([], { read: false })
    .pipe(inject(gulp.src([], { read: false }), {
      starttag: '<!-- inject:preload:css -->',
      transform: () => `<link rel="preload" href="${hashedCssPath}" as="style">`
    }));

  return gulp.src('src/index.html')
    .pipe(inject(fakeFileStream, {
      starttag: '<!-- inject:preload:css -->',
      transform: (filePath, file) => file.contents.toString()
    }))
    .pipe(gulp.dest('dist'));
});

然后在HTML的<head>中添加占位注释：

<head>
  <!-- inject:preload:css -->
  <!-- endinject -->
</head>

关键注意事项 #

• 任务顺序必须正确：一定要先完成CSS的合并、压缩、哈希生成，再处理HTML，否则清单文件还没生成，无法获取正确路径。
• 自定义清单文件：如果项目中有多个资源类型（JS、CSS），建议为CSS单独生成清单文件，避免混淆。
• 插件版本兼容：确保gulp-rev、gulp-rev-replace等插件和你使用的Gulp版本（Gulp 4+）兼容。

内容的提问来源于stack exchange，提问作者Marcos Pérez Gude