我正在使用gulp-rev 构建可以设置为never expire 的静态文件。我想将 index.html 中生成的文件的所有引用替换为这些重命名的文件，但我似乎找不到任何类似 Grunt 和 usemin 的东西。
据我目前所知，我有一些选择。
有什么想法吗？我不明白为什么这个小用例应该是我替换 Grunt 的唯一方法。
【问题讨论】：
gulp-inject，我在这里描述过：stackoverflow.com/questions/21072880/…
标签： gulp
我没有尝试通过多个 gulp 步骤来解决这个问题（gulp-rev 似乎希望你这样做），而是将 gulp-rev 分叉到 gulp-rev-all 以在一个 gulp 插件中解决这个用例。
对于我的个人用例，我绝对想修改所有内容，但是当其他人提出功能请求时，应该能够排除某些文件，例如 index.html。这将很快实施。
【讨论】：
我刚刚写了一个gulp plugin 来做这件事，它特别适用于 gulp-rev 和 gulp-useref。
具体用法取决于您的设置方式，但应该如下所示：
gulp.task("index", function() {
var jsFilter = filter("**/*.js");
var cssFilter = filter("**/*.css");
return gulp.src("src/index.html")
.pipe(useref.assets())
.pipe(jsFilter)
.pipe(uglify()) // Process your javascripts
.pipe(jsFilter.restore())
.pipe(cssFilter)
.pipe(csso()) // Process your CSS
.pipe(cssFilter.restore())
.pipe(rev()) // Rename *only* the concatenated files
.pipe(useref.restore())
.pipe(useref())
.pipe(revReplace()) // Substitute in new filenames
.pipe(gulp.dest('public'));
});
【讨论】：
我也遇到过同样的问题，我试过gulp-rev-all，但是路径有问题，不太好用。
所以我想出了一个解决方案，使用 gulp-rev 和 gulp-replace:
起初我的 html(js, css) 文件中有一个替换符号
<link rel="stylesheet" href="{{{css/common.css}}}" />
<script src="{{{js/lib/jquery.js}}}"></script>
在 css 文件中
background: url({{{img/logo.png}}})
在完成一些编译任务后，使用 gulp-replace 替换所有静态文件引用：
以stylus compile in development为例：
gulp.task('dev-stylus', function() {
return gulp.src(['./fe/css/**/*.styl', '!./fe/css/**/_*.styl'])
.pipe(stylus({
use: nib()
}))
.pipe(replace(/\{\{\{(\S*)\}\}\}/g, '/static/build/$1'))
.pipe(gulp.dest('./static/build/css'))
.pipe(refresh());
});
在生产环境中，使用 gulp-rev 生成 rev-manifest.json
gulp.task('release-build', ['release-stylus', 'release-js', 'release-img'], function() {
return gulp.src(['./static/build/**/*.css',
'./static/build/**/*.js',
'./static/build/**/*.png',
'./static/build/**/*.gif',
'./static/build/**/*.jpg'],
{base: './static/build'})
.pipe(gulp.dest('./static/tmp'))
.pipe(rev())
.pipe(gulp.dest('./static/tmp'))
.pipe(rev.manifest())
.pipe(gulp.dest('./static'));
});
然后使用 gulp-replace 将静态文件中的 refs 替换为 rev-manifest.json：
gulp.task('css-js-replace', ['img-replace'], function() {
return gulp.src(['./static/tmp/**/*.css', './static/tmp/**/*.js'])
.pipe(replace(/\{\{\{(\S*)\}\}\}/g, function(match, p1) {
var manifest = require('./static/rev-manifest.json');
return '/static/dist/'+manifest[p1]
}))
.pipe(gulp.dest('./static/dist'));
});
【讨论】：
这对我有帮助 gulp-html-replace。
<!-- build:js -->
<script src="js/player.js"></script>
<script src="js/monster.js"></script>
<script src="js/world.js"></script>
<!-- endbuild -->
var gulp = require('gulp');
var htmlreplace = require('gulp-html-replace');
gulp.task('default', function() {
gulp.src('index.html')
.pipe(htmlreplace({
'css': 'styles.min.css',
'js': 'js/bundle.min.js'
}))
.pipe(gulp.dest('build/'));
});
【讨论】：
你可以像这样使用 gulp-useref 来做到这一点。
var gulp = require('gulp'),
useref = require('gulp-useref'),
filter = require('gulp-filter'),
uglify = require('gulp-uglify'),
minifyCss = require('gulp-minify-css'),
rev = require('gulp-rev');
gulp.task('html', function () {
var jsFilter = filter('**/*.js');
var cssFilter = filter('**/*.css');
return gulp.src('app/*.html')
.pipe(useref.assets())
.pipe(jsFilter)
.pipe(uglify())
.pipe(rev())
.pipe(jsFilter.restore())
.pipe(cssFilter)
.pipe(minifyCss())
.pipe(rev())
.pipe(cssFilter.restore())
.pipe(useref.restore())
.pipe(useref())
.pipe(gulp.dest('dist'));
});
或者你甚至可以这样做：
gulp.task('html', function () {
var jsFilter = filter('**/*.js');
var cssFilter = filter('**/*.css');
return gulp.src('app/*.html')
.pipe(useref.assets())
.pipe(rev())
.pipe(jsFilter)
.pipe(uglify())
.pipe(jsFilter.restore())
.pipe(cssFilter)
.pipe(minifyCss())
.pipe(cssFilter.restore())
.pipe(useref.restore())
.pipe(useref())
.pipe(gulp.dest('dist'));
});
问题是用新的 rev 文件路径更新 html 中的资产路径。 gulp-useref 不这样做。
【讨论】：