Gulp使用另一个文件的哈希更新文件的内容

基础概念

Gulp 是一个流行的 JavaScript 任务运行器，用于自动化前端开发中的重复任务，如编译、压缩、合并文件等。哈希（Hash）是一种将任意长度的数据映射为固定长度字符串的算法，常用于生成文件的唯一标识符，以便于缓存管理和版本控制。

类型

文件内容哈希：基于文件内容生成的哈希值。
文件名哈希：将哈希值嵌入到文件名中，如 script.abc123.js。

应用场景

前端资源管理：在构建过程中自动生成带有哈希值的文件名。
CDN 缓存管理：确保更新后的资源能够及时生效。

示例代码

假设我们有一个 gulpfile.js，需要根据另一个文件的内容生成哈希值，并更新目标文件的内容。

const gulp = require('gulp');
const crypto = require('crypto');
const fs = require('fs');

// 读取源文件内容
function getSourceFileContent(filePath) {
  return fs.readFileSync(filePath, 'utf8');
}

// 生成哈希值
function generateHash(content) {
  return crypto.createHash('md5').update(content).digest('hex');
}

// 更新目标文件内容
function updateTargetFile(targetFilePath, hash) {
  const targetContent = fs.readFileSync(targetFilePath, 'utf8');
  const updatedContent = targetContent.replace(/{{hash}}/g, hash);
  fs.writeFileSync(targetFilePath, updatedContent, 'utf8');
}

// Gulp 任务
gulp.task('update-hash', function () {
  const sourceFilePath = 'src/source.txt';
  const targetFilePath = 'dist/target.txt';

  const sourceContent = getSourceFileContent(sourceFilePath);
  const hash = generateHash(sourceContent);
  updateTargetFile(targetFilePath, hash);

  console.log(`Updated ${targetFilePath} with hash: ${hash}`);
});

// 默认任务
gulp.task('default', gulp.series('update-hash'));