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

我正在使用它来构建可以设置为的静态文件。我想将index.html中生成的文件的所有引用替换为这些重命名的文件，但我似乎找不到任何类似于Grunt和usemin的引用

就我现在所知，我有一些选择

使用，这取决于吸气速度。当我去搜索时，它说gulp-usemin2做的太多了，所以我应该使用它，但是我不能配置gulp ref来使用gulp rev的输出

编写我自己的插件，用生成的文件替换index.html（和CSS）中的块（脚本和样式）

---

有什么想法吗？我不明白为什么这个小用例应该是我替换Grunt的唯一方法。

你可以用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不会这样做。

我没有尝试通过多个gulp步骤（gulp rev似乎希望您这么做）来解决这个问题，而是将gulp rev分为两个部分，在一个gulp插件中解决这个用例

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

我刚刚编写了一个用于实现这一点的程序，它在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和：

首先，我的html（js、css）文件中有一个替换符号

<link rel="stylesheet" href="{{{css/common.css}}}" />

<script src="{{{js/lib/jquery.js}}}"></script>

在完成一些编译任务后，使用gulp replace替换所有静态文件引用：

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.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将静态文件中的引用替换为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'));
});

这对我有帮助

var gulp=需要（“gulp”）；
var htmlreplace=require（'gulp-html-replace'）；
gulp.task（'default'，function（）{
gulp.src（'index.html'）
.管道（htmlreplace({
“css”：“styles.min.css”，
“js”：“js/bundle.min.js”
}))
.pipe（吞咽目标（'build/'）；
});

您可以使用

gulpinject

，我在这里已经描述过：是的，我需要它用rev路径进行更新。少做点什么对我没有任何价值。哦，现在试试这个。。。它和手表一起用吗？是否继续在后台运行而不抛出错误？您还可以添加一个示例，其中您将sass与rev一起使用吗？useref有一个问题-它在gulp.watch（faceplam）上不起作用。我非常感谢这里的分离。很高兴能将它集成到useref本身中。您能更新以使用useref的最新API吗？我正在尝试更新到这些模块的最新版本，它也在重命名index.html。我想阻止这种情况发生。我遇到了与@dale.lotts相同的问题-希望在不重命名索引的情况下运行rev/rev replace。htmlgulp-rev-all正是这样做的！事实上，对于这个问题来说，大口大口喝似乎是唯一合理的解决方案。

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