javascript - 是否有使用 Gulp 进行缓存清除的完整解决方案？

Question

它需要做的最少事情:

1. 监视文件更改并更新 dist/** 中的文件，如下所示 icon.png、abc.css、main .js 到 icon1783.png、abc84848.css、main7272.js。
2. 相应地更新源映射名称。 sourcemap 的名称应该与 js 文件相同，因为 sourcemap 的哈希值将与缩小的 js 文件不同。
3. 最后，以某种方式更新 View 中的引用。根据我的需要，使用正确的引用更新 views/** 下的哈巴狗模板。对于所有(js | css | img)。

Answer 1

模块gulp-hash可以满足您的需求。它可以向您的文件名添加哈希，并创建一个 list JSON 文件，将原始文件映射到哈希版本。然后，您可以引用此 list JSON 文件来提供文件的哈希版本。

下面是一个 Gulpfile 示例，它监视 JavaScript 更改、缩小文件、使用哈希对其进行版本控制、将其映射到 JSON 文件中，并删除旧的过时版本:

import gulp   from 'gulp';
import {exec} from 'child_process';
import hash   from 'gulp-hash';
import uglify from 'gulp-uglify';

// Minifies main.js
gulp.task('script', () => {
  exec('rm dist/scripts/main-*.min.js') // Deletes old hashed app JS file
  return gulp
    .src('dis/scripts/main.js') // Source file
    .pipe(uglify()) // Minifies the file
    .pipe(hash({ template: '<%= name %>-<%= hash %>.min<%= ext %>' })) // Adds randomly generated hash to JS file name
    .pipe(gulp.dest('dist/scripts/`)) // Adds hashed JS file to destination dir
    .pipe(hash.manifest('hashed-assets.json')) // Writes manifest JSON file
    .pipe(gulp.dest(dist/)); // Adds manifest some destination dir
});

// Watch main.js file for changes
gulp.task('watch', () => {
  gulp.watch('dist/scripts/main.js', ['script']);
});

// Default task
gulp.task('default', ['script', 'watch']);

现在，您的 dist/scripts/ 文件夹中将有一个 main.js 和 main-87362721.min.js。在您的 dist/ 文件夹中，您还会有 hashed-assets.json ，如下所示:

{"main.js":"main-87362721.min.js"}

当您对 main.js 进行更改时，监视任务会注意到您已更改该文件并将触发脚本任务。

这就是您在问题中执行#1 和#2 的方式。 #3 我将不得不离开熟悉 Pug.js 的人，但总体目标是引用 hashed-assets.json 文件并迭代每个键以提供其值。