使用 gulp-rev 后如何将修订后的文件包含到 .html 中?
How to include revisioned files into .html after using gulp-rev?
所以我在 gulp 中创建了这个任务:
'use strict';
var gulp = require('gulp');
var gulpGlobals = require('./_gulp-globals.js');
var rev = require('gulp-rev');
var revReplace = require('gulp-rev-replace');
gulp.task('gulp-rev', function () {
var sources = gulpGlobals.src + '/somefolder/**/*.js';
var fileToInject = gulpGlobals.destination + '/somefolder/script.js';
var outputFolderJs = 'webapp/dist/somefolder';
return gulp.src(fileToInject)
.pipe(rev())
.pipe(revReplace())
.pipe(gulp.dest(outputFolderJs));
});
并且它会创建额外的文件,例如:
script-7c58e79612.js
但是我如何将它包含在我的 html 文件中而不是 script.js
中?
因此,例如我的 file.html
:
中的这一行
<script type="text/javascript" src="{{ STATIC_URL}}/somefolder/script.js</script>
我可以拥有这个:
<script type="text/javascript" src="{{ STATIC_URL}}/somefolder/script-7c58e79612.js</script>
您在尝试时需要 gulp-rev-replace
,但您需要在 html 文件而不是脚本文件中使用它。例如,尝试像这样修改您的任务:
var manifestFolder = 'webapp/dist/manifest';
gulp.task("gulp-rev", function(){
var sources = gulpGlobals.src + '/somefolder/**/*.js';
var fileToInject = gulpGlobals.destination + '/somefolder/script.js';
var outputFolderJs = 'webapp/dist/somefolder';
return gulp.src(fileToInject)
.pipe(rev())
.pipe(gulp.dest(outputFolderJs))
.pipe(rev.manifest()
.pipe(gulp.dest(manifestFolder));
})
gulp.task("revreplace", ["gulp-rev"], function() {
var manifest = gulp.src("./" + manifestFolder + "/rev-manifest.json");
var source = gulpGlobals.src + '/somefolder/file.html';
var outputFolderHtml = 'webapp/dist/somefolder';
return gulp.src(source)
.pipe(revReplace({manifest: manifest}))
.pipe(gulp.dest(outputFolderHtml));
});
这段代码是基于gulp-rev-replace
的usage documentation的第二个例子。该页面上还有更多文档和示例。
您可以通过交换 gulp-rev-all
插件来避免中间的 manifest 步骤。它将修订资产和重写引用合二为一。
// Imports
const gulp = require('gulp');
const RevAll = require('gulp-rev-all');
// Tasks
const task = {
resourcify() {
const srcFiles = 'some/src/folder/**';
const buildFolder = 'some/build/folder';
return gulp.src(srcFiles)
.pipe(RevAll.revision({ dontRenameFile: ['.html'] }))
.pipe(gulp.dest(buildFolder));
}
};
// Gulp
gulp.task('resourcify', task.resourcify);
文档:
https://github.com/smysnk/gulp-rev-all
注:
该项目存在争议,因为它将两个功能组合到一个 Gulp 插件中。但是,在这种情况下,组合功能是必要的,因为组合解决了先有鸡还是先有蛋的问题。
已编辑:
更新了示例代码以支持最新版本的插件。
所以我在 gulp 中创建了这个任务:
'use strict';
var gulp = require('gulp');
var gulpGlobals = require('./_gulp-globals.js');
var rev = require('gulp-rev');
var revReplace = require('gulp-rev-replace');
gulp.task('gulp-rev', function () {
var sources = gulpGlobals.src + '/somefolder/**/*.js';
var fileToInject = gulpGlobals.destination + '/somefolder/script.js';
var outputFolderJs = 'webapp/dist/somefolder';
return gulp.src(fileToInject)
.pipe(rev())
.pipe(revReplace())
.pipe(gulp.dest(outputFolderJs));
});
并且它会创建额外的文件,例如:
script-7c58e79612.js
但是我如何将它包含在我的 html 文件中而不是 script.js
中?
因此,例如我的 file.html
:
<script type="text/javascript" src="{{ STATIC_URL}}/somefolder/script.js</script>
我可以拥有这个:
<script type="text/javascript" src="{{ STATIC_URL}}/somefolder/script-7c58e79612.js</script>
您在尝试时需要 gulp-rev-replace
,但您需要在 html 文件而不是脚本文件中使用它。例如,尝试像这样修改您的任务:
var manifestFolder = 'webapp/dist/manifest';
gulp.task("gulp-rev", function(){
var sources = gulpGlobals.src + '/somefolder/**/*.js';
var fileToInject = gulpGlobals.destination + '/somefolder/script.js';
var outputFolderJs = 'webapp/dist/somefolder';
return gulp.src(fileToInject)
.pipe(rev())
.pipe(gulp.dest(outputFolderJs))
.pipe(rev.manifest()
.pipe(gulp.dest(manifestFolder));
})
gulp.task("revreplace", ["gulp-rev"], function() {
var manifest = gulp.src("./" + manifestFolder + "/rev-manifest.json");
var source = gulpGlobals.src + '/somefolder/file.html';
var outputFolderHtml = 'webapp/dist/somefolder';
return gulp.src(source)
.pipe(revReplace({manifest: manifest}))
.pipe(gulp.dest(outputFolderHtml));
});
这段代码是基于gulp-rev-replace
的usage documentation的第二个例子。该页面上还有更多文档和示例。
您可以通过交换 gulp-rev-all
插件来避免中间的 manifest 步骤。它将修订资产和重写引用合二为一。
// Imports
const gulp = require('gulp');
const RevAll = require('gulp-rev-all');
// Tasks
const task = {
resourcify() {
const srcFiles = 'some/src/folder/**';
const buildFolder = 'some/build/folder';
return gulp.src(srcFiles)
.pipe(RevAll.revision({ dontRenameFile: ['.html'] }))
.pipe(gulp.dest(buildFolder));
}
};
// Gulp
gulp.task('resourcify', task.resourcify);
文档:
https://github.com/smysnk/gulp-rev-all
注:
该项目存在争议,因为它将两个功能组合到一个 Gulp 插件中。但是,在这种情况下,组合功能是必要的,因为组合解决了先有鸡还是先有蛋的问题。
已编辑:
更新了示例代码以支持最新版本的插件。