gulp-rev avec useref renommer fichier index.html ainsi

Question

Je suis nouveau à l'utilisation de gulp et j'essaie de créer un fichier gulp pour mon projet.

Ma première tâche consiste à combiner tous mes tags de script et de liens présents dans index.html et de les remplacer par un seul tag. Pour atteindre ce but, je me sers de gulp-useref comme ci-dessous.

gulp.task('useref', ['clean'], function() { 
    return gulp.src(config.paths.app.src + 'index.html')  
    .pipe(gulpif('*.js', uglify())) 
    .pipe(gulpif('*.css', cleanCSS())) 
    .pipe(useref()) 
    .pipe(gulp.dest(config.paths.dist.src)) 
}); 

Cette chose simplement concatène et minifies tous mes fichiers JS et CSS et créer un seul script et la balise lien pour eux. Tout bien jusqu'à ici.

Maintenant, je souhaite implémenter le hachage aux fichiers JS et CSS combinés. Pour cela, j'utilise gulp-rev et gulp-rev-replace comme ci-dessous.

gulp.task('useref', ['clean'], function() { 
    return gulp.src(config.paths.app.src + 'index.html')  
    .pipe(gulpif('*.js', uglify())) 
    .pipe(gulpif('*.css', cleanCSS())) 
    .pipe(useref()) 
    .pipe(rev()) 
    .pipe(revReplace()) 
    .pipe(gulp.dest(config.paths.dist.src)) 
}); 

Ceci fonctionne également bien mais pour une petite chose. Il crée les noms de fichiers hachés non seulement pour mes fichiers JS et CSS, mais aussi pour mon fichier index.html ainsi que ci-dessous.

est-il un moyen par lequel je peux éviter le changement de nom du fichier index.html tout en conservant la JS et CSS haché parce que mon nom de fichier serveur rechercherait le fichier index.html dans le dossier plutôt que index - *********. html?

Merci.

Answer 1

essayer

var ignoreIndexHtml = gulpfilter(['**/*', '!**/index.html'], { restore: true }); 

return gulp 
    .src('......') 
    .pipe('......') 
    .pipe('......') 
    .pipe(ignoreIndexHtml) 
    .pipe($.rev())  
    .pipe(ignoreIndexHtml.restore)  
    .pipe($.revReplace()) 
    .pipe(gulp.dest('......')); 

Answer 2

Je ne sais pas si cela est le moyen idéal pour résoudre le problème, mais ma solution était d'appliquer gulpif pour filtrer les actifs css/js puis appelez rev(). revReplace doit toujours mettre à jour votre fichier d'index pour utiliser les ressources css/js renommées.

Essentiellement, vous pouvez ajouter le tuyau suivant à votre flux:

.pipe(gulpif(*.{js,css}, rev())) 

Exemple basé sur votre code:

gulp.task('useref', ['clean'], function() { 
    return gulp.src(config.paths.app.src + 'index.html')  
    .pipe(gulpif('*.js', uglify())) 
    .pipe(gulpif('*.css', cleanCSS())) 
    .pipe(useref()) 
    .pipe(gulpif('*.{js,css}', rev())) 
    .pipe(revReplace()) 
    .pipe(gulp.dest(config.paths.dist.src)) 
}); 

Answer 3

J'ai eu le même problème, mais j'utilisais gulp-rev-all au lieu de gulp-rev comme tu es.

Ma solution (solution de contournement) fonctionnera toujours pour vous et pour les autres personnes intéressées. Essentiellement, vous devez exécuter une autre tâche-gulp après avoir 'rev' tous vos fichiers.

J'utilise gulp-inject pour récupérer les fichiers récemment révisés et les injecter dans mon fichier index.html.

Étape 1: utilisation gulp-rev ou gulp-rev-all dans mon cas à la révision de vos fichiers et les enregistrer dans votre dossier /dist.

Exemple:

gulp.task('rev', function() { 

    var css= gulp 
     .src(styles) 
     .pipe(concat('main.css')) 
    .pipe(RevAll.revision()) 
     .pipe(gulp.dest('dist/css')); 

    var js = gulp 
     .src(scripts) 
     .pipe(concat('scripts.js')) 
     .pipe(RevAll.revision()) 
     .pipe(gulp.dest('dist/js')); 

    return merge(css, js); //merge is from the gulp plugin merge-stream. It allows me to manipulate multiple streams in 1 task instead of having separate tasks. 

}); 

Étape 2: Utilisez gulp-inject pour injecter les nouvellement créées références de fichier css/js dans votre index.html

Markup votre index.html comme ceci:

<!-- inject:css --> 
    <!-- endinject --> 

<!-- inject:js --> 
<!-- endinject --> 

Étape 3: Utilisez gulp-inject pour saisir les nouveaux fichiers revisioned et les injecter dans votre index.html

gulp.task('inject', 
    function() { 
     var jsSource = gulp.src('./dist/js/*.js', { read: false }); 
     var cssSource = gulp.src('./dist/css/*.css', { read: false }); 
     return gulp.src('./index.html') 
      .pipe(inject(merge(jsSource, cssSource))) 
      .pipe(clean({force:true})) 
     .pipe(gulp.dest('./')); 
    }); 

Dans mon projet, je ne mets pas le index.html dans le dossier dist. Peut-être que je devrais, mais dans cet exemple/projet, je ne le fais pas.

Ma structure de dossier

index.html 
--/dist 
---/js 
---/css 
---/views 

---

gulp-injection documentation

gulp-rev-all documentation

S'il vous plaît laissez-moi savoir s'il y a d'autres questions, je J'adore y répondre