6

所以我在 gulp 中创建了这个任务：

'use strict';
var gulp = require('gulp');
var gulpGlobals = require('./_gulp-globals.js');
var rev = require('gulp-rev');
var revReplace = require('gulp-rev-replace');


gulp.task('gulp-rev', function () {
    var sources = gulpGlobals.src + '/somefolder/**/*.js';
    var fileToInject = gulpGlobals.destination + '/somefolder/script.js';

    var outputFolderJs = 'webapp/dist/somefolder';

    return gulp.src(fileToInject)
        .pipe(rev())
        .pipe(revReplace())
        .pipe(gulp.dest(outputFolderJs));
});

它会创建像这样命名的附加文件，例如： script-7c58e79612.js

但是我如何将它包含在我的 html 文件中而不是script.js? 因此，例如，而不是我的这一行file.html：

<script type="text/javascript" src="{{ STATIC_URL}}/somefolder/script.js</script>

我可以有这个：

<script type="text/javascript" src="{{ STATIC_URL}}/somefolder/script-7c58e79612.js</script>
4

2 回答 2

8

您gulp-rev-replace在尝试时需要这样做，但您需要在 html 文件而不是脚本文件上使用它。例如，尝试像这样修改您的任务：

var manifestFolder = 'webapp/dist/manifest';

gulp.task("gulp-rev", function(){
    var sources = gulpGlobals.src + '/somefolder/**/*.js';
    var fileToInject = gulpGlobals.destination + '/somefolder/script.js';
    var outputFolderJs = 'webapp/dist/somefolder';

    return gulp.src(fileToInject)
        .pipe(rev())
        .pipe(gulp.dest(outputFolderJs))
        .pipe(rev.manifest()
        .pipe(gulp.dest(manifestFolder));
})

gulp.task("revreplace", ["gulp-rev"], function() {
    var manifest = gulp.src("./" + manifestFolder + "/rev-manifest.json");
    var source = gulpGlobals.src + '/somefolder/file.html';
    var outputFolderHtml = 'webapp/dist/somefolder';

    return gulp.src(source)
        .pipe(revReplace({manifest: manifest}))
        .pipe(gulp.dest(outputFolderHtml));
});

此代码基于. gulp-rev-replace该页面上还有更多文档和示例。

于 2015-08-19T18:35:20.927 回答
2

您可以通过交换插件来避免中间清单步骤。gulp-rev-all它将修订资产和重写引用合并为一个步骤。

// Imports
const gulp =   require('gulp');
const RevAll = require('gulp-rev-all');

// Tasks
const task = {
   resourcify() {
      const srcFiles =    'some/src/folder/**';
      const buildFolder = 'some/build/folder';
      return gulp.src(srcFiles)
         .pipe(RevAll.revision({ dontRenameFile: ['.html'] }))
         .pipe(gulp.dest(buildFolder));
      }
   };

// Gulp
gulp.task('resourcify', task.resourcify);

文档：
https ://github.com/smysnk/gulp-rev-all

注意：
该项目存在争议，因为它将两个功能组合到一个 Gulp 插件中。然而，在这种情况下，组合这些功能是有必要的，因为这种组合解决了先有鸡还是先有蛋的问题。

已编辑：
更新了示例代码以支持最新版本的插件。

于 2016-08-26T19:23:00.840 回答