Question

我正在使用gulp-rev构建我可以设置为never expire的静态文件。我想将index.html中生成的文件的所有引用替换为这些重命名的文件，但我似乎找不到像Grunt那样使用usemin的任何内容。

据我现在所知，我有一些选择。

使用gulp-usemin2，这取决于gulp-rev。当我去搜索Gulp plugins时，它说gulp-usemin2做得太多，所以我应该使用gulp-useref代替，但是我无法配置gulp-ref来使用gulp-rev＆＃39;输出。
编写我自己的插件，将index.html（和CSS中）的块（脚本和样式）替换为生成的文件。

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

Answer 1

我没有试图解决这个问题多个gulp步骤（gulp-rev似乎希望你这样做），我已经将gulp-rev分叉到gulp-rev-all以在一个gulp插件中解决这个用例。

对于我的个人用例，我想要完全禁止所有内容但是当其他人提出功能请求时，应该能够排除某些文件，例如index.html。这将很快实施。

Answer 2

我刚刚写了一个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'));
});

Answer 3

我遇到了同样的问题，我尝试了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编译为例：

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

Answer 4

这帮助了我gulp-html-replace。

foreignObject

Answer 5

你可以用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-rev的输出替换index.html中列出的文件名？

5 个答案: