gulp-rev mit renef rename index.html Datei auch

Question

Ich bin neu zu Schluck verwenden und versuche, eine gulpfile für mein Projekt zu erstellen.

Meine erste Aufgabe ist es, alle meine Skript und Link-Tags in index.html zu kombinieren und sie durch nur ein einziges Tag zu ersetzen. Um diesen Zweck zu erreichen, benutze ich gulp-useref wie folgt.

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

Dieses Ding einfach verkettet und minimiert alle meine JS und CSS-Dateien und erstellen Sie ein einzelnes Skript und Link-Tag für sie. Alles gut bis hier.

Nun möchte ich Hashing zu den kombinierten JS und CSS-Dateien auch implementieren. Dafür verwende ich gulp-rev und gulp-rev-replace wie unten beschrieben.

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

Das funktioniert auch gut, aber für eine kleine Sache. Es erstellt die Hash-Dateinamen nicht nur für meine JS- und CSS-Dateien, sondern auch für meine index.html-Datei und darunter.

Gibt es eine Möglichkeit, durch die ich die Umbenennung der Datei index.html vermeiden kann, während immer noch die JS zu erhalten und CSS gehasht Dateinamen, weil mein Server für die Datei index.html im Ordner aussehen würde, anstatt Index - *********. HTML?

Danke.

Answer 1

versuchen

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

Ich bin nicht sicher, ob dies der ideale Weg ist, um das Problem zu lösen, aber meine Lösung war gulpif anwenden css/js Assets herauszufiltern und dann rev() nennen. revReplace sollte weiterhin Ihre Indexdatei aktualisieren, um die umbenannten css/js-Assets zu verwenden.

Im Wesentlichen können Sie das folgende Rohr zu Ihrem Stream hinzufügen:

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

Beispiel basiert auf dem 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

hatte ich das gleiche Problem, aber ich wurde mit gulp-rev-all statt gulp-rev wie Du bist.

Meine Lösung (Workaround) funktioniert immer noch für Sie und andere, die interessiert sind.

Im Wesentlichen müssen Sie eine weitere Schluck-Aufgabe ausführen, nachdem Sie alle Ihre Dateien "rev" haben.

Ich verwende gulp-inject, um die neu revisionierten Dateien zu erfassen und sie in meine index.html-Datei zu injizieren.

Schritt 1: Verwendung gulp-rev oder gulp-rev-all in meinem Fall Revision Ihre Dateien und speichern Sie sie in Ihrem /dist Ordner.

Beispiel:

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. 

}); 

Schritt 2: Verwenden gulp-inject die neu erstellten css/js Dateiverweise in Ihrer index.html

Markup Ihre index.html wie diese zu injizieren:

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

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

Schritt 3: Verwenden gulp-inject die neu revisioned Dateien zu packen und sie in Ihre index.html injizieren

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

In meinem Projekt, ich habe nicht die index.html im dist Ordner. Vielleicht sollte ich, aber in diesem Beispiel/Projekt nicht.

Meine Ordnerstruktur

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

---

schluck injizieren documentation

schluck-rev-all documentation

Bitte lassen Sie mich wissen, ob es noch weitere Fragen gibt, würde ich Liebe, sie zu beantworten