javascript - gulp-rev with userref 重命名 index.html 文件

Question

我刚开始使用 gulp，正在尝试为我的项目创建一个 gulpfile。

我的第一个任务是组合 index.html 中存在的所有脚本和链接标签，并仅用一个标签替换它们。为了实现这个目的，我正在使用 gulp-useref 如下。

gulp.task('useref', ['clean'], function () {
    return gulp.src(config.paths.app.src + 'index.html')    
    .pipe(gulpif('*.js', uglify()))
    .pipe(gulpif('*.css', cleanCSS()))
    .pipe(useref()) 
    .pipe(gulp.dest(config.paths.dist.src))
});

这个东西只是连接和缩小我所有的 JS 和 CSS 文件，并为它们创建一个脚本和链接标签。一切都很好。

现在，我也希望对组合的 JS 和 CSS 文件实现哈希处理。为此，我正在使用如下所示的 gulp-rev 和 gulp-rev-replace 插件。

gulp.task('useref', ['clean'], function () {
    return gulp.src(config.paths.app.src + 'index.html')    
    .pipe(gulpif('*.js', uglify()))
    .pipe(gulpif('*.css', cleanCSS()))
    .pipe(useref())
    .pipe(rev())
    .pipe(revReplace()) 
    .pipe(gulp.dest(config.paths.dist.src))
});

这也很有效，但只是为了一件小事。它不仅为我的 JS 和 CSS 文件而且为我的 index.html 文件以及下面的文件创建散列文件名。

有没有一种方法可以避免重命名 index.html 文件，同时仍然保留 JS 和 CSS 哈希文件名，因为我的服务器会在文件夹中查找 index.html 文件而不是 index-**** *****.html?

谢谢。

Answer 1

我不确定这是否是解决问题的理想方法，但我的解决方案是应用 gulpif 过滤掉 css/js Assets ，然后调用 rev()。 revReplace 仍应更新您的索引文件以使用重命名的 css/js Assets 。

基本上您可以将以下管道添加到您的流中:

.pipe(gulpif(*.{js,css}, rev()))

基于您的代码的示例:

gulp.task('useref', ['clean'], function () {
    return gulp.src(config.paths.app.src + 'index.html')    
    .pipe(gulpif('*.js', uglify()))
    .pipe(gulpif('*.css', cleanCSS()))
    .pipe(useref())
    .pipe(gulpif('*.{js,css}', rev()))
    .pipe(revReplace()) 
    .pipe(gulp.dest(config.paths.dist.src))
});