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か? たとえば、 my の次の行の代わりに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));
});

このコードは、 の使用法ドキュメントの2 番目の例に基づいていgulp-rev-replaceます。より多くのドキュメントと例もそのページにあります。

于 2015-08-19T18:35:20.927 に答える
2

プラグインをスワップすることで、マニフェストの中間ステップを回避できます。gulp-rev-allアセットの改訂と参照の書き換えを 1 つのステップにまとめます。

// 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

注:
このプロジェクトは、2 つの機能を 1 つの Gulp プラグインに結合するという点で物議を醸しています。ただし、この場合、機能を組み合わせることが正当化されます。これは、組み合わせによってニワトリが先か卵が先かの問題を解決するためです。

編集:
プラグインの最新バージョンをサポートするようにサンプル コードを更新しました。

于 2016-08-26T19:23:00.840 に答える