web-dev-qa-db-ja.com

index.htmlにリストされているファイル名をgulp-revの出力に置き換えるにはどうすればよいですか？

gulp-rev を使用して、 never expire に設定できる静的ファイルを構築しています。 index.htmlで生成されたファイルへのすべての参照をこれらの名前が変更されたファイルに置き換えたいのですが、Gruntとuseminのようなことをするものが見つからないようです。

すぐにわかる限り、いくつかのオプションがあります。

  1. gulp-usemin2 を使用します。これはgulp-revに依存します。 Gulp plugins を検索すると、gulp-usemin2の処理が多すぎるため、代わりに gulp-useref を使用する必要がありますが、gulp-refをgulp-revの出力を使用します。
  2. 独自のプラグインを作成して、index.html（およびCSS）のブロック（スクリプトとスタイル）を生成されたファイルに置き換えます。

何か案は？ Gruntに取って代わる方法として、この小さなユースケースだけが必要な理由はわかりません。

gulp
19
geowa4

この問題を複数のgulpステップ（gulp-revがあなたに望んでいるようです）を解決しようとするのではなく、gulp-revを gulp-rev-all に分岐して、このユースケースを1つのgulpで解決しましたプラグイン。

私のユースケースでは、絶対にすべてを改訂したかったのですが、他の誰かが機能要求を提起したため、index.htmlのような特定のファイルを除外する機能があるはずです。これはすぐに実装されます。

13
smysnk

これを行うために gulpプラグイン を記述しましたが、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'));
});
11
James Nelson

私は同じ問題に直面しました、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}}})



2番目のコンパイルタスクの後、gulp-replaceを使用してすべての静的ファイル参照を置き換えます：

開発中のスタイラスコンパイルを例として取り上げます。

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

これは私を助けました gulp-html-replace 。

 <!-- 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/'));
    });
4
Arham Ali Qureshi

このように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はそれを行いません。

2
jonkemp