gulp-rev 与 useref 重命名 index.html 文件以及答案

【问题标题】：gulp-rev with useref renaming index.html file as wellgulp-rev 与 useref 重命名 index.html 文件以及
【发布时间】：2016-11-25 22:01:58
【问题描述】：

我是使用 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?

谢谢。

【问题讨论】：

标签： javascript gulp gulp-useref gulp-rev

【解决方案1】：

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

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

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

【讨论】：

这对我有用，尽管我必须这样做.pipe(gulpif(/\.css|\.js$/, $.rev()))

【解决方案2】：

我遇到了同样的问题，但我使用的是 gulp-rev-all 而不是像你一样的 gulp-rev。

我的解决方案（解决方法）仍然适用于您和其他感兴趣的人。

本质上，您需要在“rev”所有文件后运行另一个 gulp-task。

我使用gulp-inject 来获取新修订的文件，并将它们注入到我的 index.html 文件中。

第 1 步： 在我的情况下使用 gulp-rev 或 gulp-rev-all 来修改您的文件并将它们保存到您的 /dist 文件夹中。

例子：

gulp.task('rev', function () {

   var css= gulp
      .src(styles)
        .pipe(concat('main.css'))
     .pipe(RevAll.revision())
      .pipe(gulp.dest('dist/css'));

    var js = gulp
        .src(scripts)
        .pipe(concat('scripts.js'))
        .pipe(RevAll.revision())
        .pipe(gulp.dest('dist/js'));

    return merge(css, js); //merge is from the gulp plugin merge-stream.  It allows me to manipulate multiple streams in 1 task instead of having separate tasks.

});

第 2 步： 使用gulp-inject 将新创建的 css/js 文件引用注入到您的 index.html 中

像这样标记你的 index.html：

  <!-- inject:css -->
  <!-- endinject -->

<!-- inject:js -->
<!-- endinject -->

第 3 步： 使用gulp-inject 获取新修订的文件并将它们注入到您的 index.html 中

gulp.task('inject',
    function() {
        var jsSource = gulp.src('./dist/js/*.js', { read: false });
        var cssSource = gulp.src('./dist/css/*.css', { read: false });
        return gulp.src('./index.html')
            .pipe(inject(merge(jsSource, cssSource)))
            .pipe(clean({force:true}))
        .pipe(gulp.dest('./'));
    });

在我的项目中，我没有将 index.html 放在 dist 文件夹中。也许我应该，但在这个例子/项目中我没有。

我的文件夹结构

index.html
--/dist
---/js
---/css
---/views

gulp-inject documentation

gulp-rev-all documentation

如果有其他问题请告诉我，我很乐意回答他们

【讨论】：

【解决方案3】：

试试

var ignoreIndexHtml = gulpfilter(['**/*', '!**/index.html'], { restore: true });

return gulp
    .src('......')
    .pipe('......')
    .pipe('......')
    .pipe(ignoreIndexHtml)
    .pipe($.rev())    
    .pipe(ignoreIndexHtml.restore)    
    .pipe($.revReplace())
    .pipe(gulp.dest('......'));

【讨论】：