Wie ersetze ich die in index.html aufgelisteten Dateinamen durch die Ausgabe von gulp-rev?

Anstatt zu versuchen dieses problem zu lösen, mehrere Schluck Schritte (die gulp-rev scheint zu wollen, dass Sie tun), habe ich Gabel-gulp-rev zu gulp-rev-alle um dieses Problem zu lösen Anwendungsfall in einem Schluck plugin.

Für meinen persönlichen Anwendungsfall wollte ich rev absolut alles, aber als jemand anderes hob eine feature-Anfrage, sollte es die Möglichkeit bestimmte Dateien auszuschließen wie index.html. Diese werden schnellstmöglich umgesetzt.

InformationsquelleAutor der Antwort smysnk

Habe ich konfrontiert das gleiche problem, ich habe versucht, Schluck-rev-alle, aber es hat einige Pfad-problem, nicht ganz kostenlos zu benutzen.

Also habe ich herausfinden, eine Lösung, die Verwendung gulp-rev und gulp-ersetzen:

Zunächst habe ich eine ersetzen-symbol in meinem html(js, css) Dateien

<link rel="stylesheet" href="{{{css/common.css}}}" />

<script src="{{{js/lib/jquery.js}}}"></script>

in css-Dateien

background: url({{{img/logo.png}}})

Zweite nach einiger compile-task, nutzen Sie gulp-ersetzen-ersetzen alle statischen Dateien Referenz:

nehmen stylus kompilieren in der Entwicklung, als Beispiel:

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

In einer Produktionsumgebung zu verwenden gulp-rev generiert 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'));
});

Dann nutzen Sie gulp-ersetzen ersetzen die refs in statische Dateien, die mit 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'));
});

InformationsquelleAutor der Antwort BeiYuu

Könnte man es machen, mit gulp-useref wie diese.

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

oder Sie können sogar tun es auf diese Weise:

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

Das problem ist die Aktualisierung der asset-Pfade in der html mit der neuen rev Datei-Pfade. gulp-useref nicht tun.

InformationsquelleAutor der Antwort jonkemp