Как включить исправленные файлы в.html после использования gulp-rev?

Question

Итак, я создал эту задачу в 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>

Answer 1

Вам нужно 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, Больше документации и примеров также на этой странице.

Answer 2

Вы можете избежать промежуточного шага манифеста, поменяв местами gulp-rev-all плагин. Он объединяет пересмотр активов и переписывание ссылок в один шаг.

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

// Tasks
const task = {
   resourcify: function() {
      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. Однако в этом случае объединение функций является оправданным, потому что это решение решает проблему курицы и яйца.

Отредактировано:
Обновлен пример кода для поддержки последней версии плагина.