如何用gulp-rev的输出替换index.html中列出的文件名？

How do I replace the filenames listed in index.html with the output of gulp-rev?

我正在使用gulp-rev构建可以设置为永不过期的静态文件。我想将index.html中对生成文件的所有引用替换为这些重命名的文件，但是我似乎找不到用usemin.grpunt这样的东西。

据我目前所知，我有一些选择。

使用gulp-usemin2，具体取决于gulp-rev。当我去搜索Gulp插件时，它说gulp-usemin2做得太多，所以我应该改用gulp-useref，但是我无法配置gulp-ref来使用gulp-rev的输出。

编写我自己的插件，替换块(脚本

相关讨论

我没有试图通过多个gulp步骤来解决此问题(gulp-rev似乎希望您这样做)，而是将gulp-rev分叉到gulp-rev-all以在一个gulp插件中解决此用例。 >

对于我个人的用例，我想绝对修改所有内容，但是当其他人提出功能请求时，应该可以排除某些文件，例如index.html。这将很快实现。

相关讨论

我刚刚编写了一个gulp插件来执行此操作，它与gulp-rev和gulp-useref一起使用特别好。

用法取决于您的设置方式，但外观应类似于：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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)文件中有一个替换符号。

1
2
3

在CSS文件中

1	background: url({{{img/logo.png}}})

其次，在执行一些编译任务后，使用gulp-replace替换所有静态文件参考：

以手写笔在开发中的编译为例：

1
2
3
4
5
6
7
8
9

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

1
2
3
4
5
6
7
8
9
10
11
12
13

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将静态文件中的引用替换为rev-manifest.json：

1
2
3
4
5
6
7
8

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。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<script src="js/player.js">
<script src="js/monster.js">
<script src="js/world.js">

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来做到这一点。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

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'));
});

或者您甚至可以这样：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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不会这样做。

相关讨论