web-dev-qa-db-fra.com

Comment remplacer les noms de fichiers répertoriés dans index.html par la sortie de gulp-rev?

J'utilise gulp-rev pour créer des fichiers statiques que je peux définir n'expire jamais . J'aimerais remplacer toutes les références aux fichiers générés dans index.html par ces fichiers renommés, mais je n'arrive pas à trouver quoi que ce soit comme Grunt avec usemin.

Pour autant que je sache, j'ai quelques options.

  1. Utilisez gulp-usemin2 , qui dépend de gulp-rev. Quand je vais chercher plugins Gulp , ça dit que gulp-usemin2 en fait trop donc je devrais utiliser gulp-useref à la place, mais je ne peux pas configurer gulp-ref pour utilisez la sortie de gulp-rev.
  2. Écrivez mon propre plugin pour remplacer les blocs (scripts et styles) dans index.html (et dans le CSS) par les fichiers générés.

Des idées? Je ne vois pas pourquoi ce petit cas d'utilisation devrait être la seule chose à faire pour remplacer Grunt.

gulp
19
geowa4

Plutôt que d'essayer de résoudre ce problème en plusieurs étapes de gorgée (ce que gulp-rev semble vouloir que vous fassiez), j'ai bifurqué gulp-rev vers gulp-rev-all pour résoudre ce cas d'utilisation en une seule gorgée brancher.

Pour mon utilisation personnelle, je voulais absolument tout réviser, mais comme quelqu'un d'autre a soulevé une demande de fonctionnalité, il devrait être possible d'exclure certains fichiers comme index.html. Cela sera bientôt mis en œuvre.

13
smysnk

Je viens d'écrire un plugin gulp pour ce faire, cela fonctionne particulièrement bien avec gulp-rev et gulp-useref.

L'utilisation dépendra de la façon dont vous avez configuré les choses, mais elle devrait ressembler à:

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

J'ai rencontré le même problème, j'ai essayé gulp-rev-all, mais il a un problème de chemin, pas très libre à utiliser.

Donc, je trouve une solution, utilisez gulp-rev et gulp-replace :



Au début, j'ai un symbole de remplacement dans mes fichiers html (js, css) 

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

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

dans les fichiers css

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



Deuxième après une tâche de compilation, utilisez gulp-replace pour remplacer toutes les références de fichiers statiques:

prenez la compilation du stylet en développement comme exemple:

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



Dans l'environnement de production, utilisez gulp-rev pour générer 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'));
});

Ensuite, utilisez gulp-replace pour remplacer les références dans les fichiers statiques par 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

Cela m'a aidé 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

Vous pouvez le faire avec gulp-useref comme ça.

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

ou vous pouvez même le faire de cette façon:

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

Le problème est la mise à jour des chemins d'accès aux ressources en html avec les nouveaux chemins d'accès aux fichiers rev. gulp-useref ne fait pas ça.

2
jonkemp