Cache scarica le immagini di sfondo nel mio CSS con Gulp senza dover modificare il mio SASS?

Question

Desidero memorizzare nella cache le immagini di sfondo nel mio CSS. Quindi, se il mio stile originale è:

.one { 
    background: url(image.png); 
} 

Una stringa può essere aggiunto:

.one { 
    background: url(image.png?1234); 
} 

O il nome del file potrebbe essere cambiato:

.one { 
    background: url(image-1234.png); 
} 

Invece di utilizzare un generatore casuale o un l'ID timestamp piace usare un hash del file immagine in modo tale che la cache venga sballata solo quando necessario (quando il file è effettivamente cambiato).

Im usando SASS e Gulp così ho potuto usare Gulp Cache Buster e Gulp Hasher:

https://github.com/disintegrator/gulp-hasher

https://github.com/disintegrator/gulp-cache-buster

Il problema che ho con questi è che sembra che è necessario modificare la vostra SASS. Quindi, se si inizia con questo:

.logo { 
    background: url(assets/images/logo.svg); 
} 

è necessario modificare a questo:

.logo { 
    background: url(ASSET{assets/images/logo.svg}); 
} 

voglio mantenere la mia SASS bello e pulito e non modificarlo in questo modo. È possibile?

Answer 1

Il modo in cui lo vedo ha due opzioni: entrambe utilizzano i plug-in hasher e cache busting elencati:

1. Scrivere un compito ingannevole che aggiungerebbe automaticamente ASSET{ ... } a tutti gli URL nel file CSS. Ciò accadrebbe dopo la concatenazione e prima dello hashing/busting. Dato che hai una taglia su questa domanda, fammi sapere se vuoi che scriva questo compito. Ti suggerisco di prenderlo a pugni, anche se b/c potresti imparare alcune cose belle.

2. Soluzione ideale: Il plug-in di busting della cache ha un'opzione per definire la regex da utilizzare per trovare le risorse. Per impostazione predefinita, la regex è impostata su /ASSET{(.*?)}/g, ma è possibile eseguire facilmente l'aggiornamento a qualcosa per abbinarsi a buoni vecchi vaniglia CSS url(...) s.Di nuovo, dato che hai una taglia fammi sapere se vuoi un aiuto sulla regex - ma ti suggerisco di prenderlo a pugni b/c potresti imparare qualcosa di pulito (pssst, vuoi ignorare gli URL data:).

   Prova questa regex nella configurazione della cache busto:
   /url\((?!['"]?data:)['"]?([^'"\)]*)['"]?\)/g

   Se si desidera ignorare gli URL che iniziano con "http" (significa che sono ospitati su un altro dominio), quindi utilizzare la seguente espressione regolare. Questo presuppone che tutti i percorsi per le risorse sono relative, che dovrebbero essere:
   /url\((?!['"]?(?:data|http):)['"]?([^'"\)]*)['"]?\)/g
   http://www.regexpal.com/?fam=94251

   Se si vuole essere in grado di definire gli attributi CSS che avranno hash/rotto gli URL, è possibile utilizzare il seguente , che si applica solo agli URL definiti negli attributi background, background-image e list-style CSS. È possibile aggiungere più con l'aggiunta di un tubo | più il nome dell'attributo dopo |list-style:
   /(?:background(?:-image)?|list-style)[\s]*:[^\r\n;]*url\((?!['"]?(?:data|http):)['"]?([^'"\)]*)/g
   http://www.regexpal.com/?fam=94252

Answer 2

È possibile utilizzare gulp-rev-all. Sarà in grado di aggiungere hash ai file e riscriverli senza la necessità di aggiungere ulteriori markup al file SASS.

Un file sorso di base per la stessa sarebbe simile -

var gulp = require('gulp'); 
var sass = require('gulp-sass'); 
var RevAll = require('gulp-rev-all'); 

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

var revAll = new RevAll({dontRenameFile: ['index.html']}); 

gulp.src(['app.sass']) 
.pipe(sass().on('error', sass.logError)) 
.pipe(revAll.revision()) 
.pipe(gulp.dest('build')); 

gulp.src(['**.jpg','**.png','**.gif']) 
.pipe(revAll.revision()); 

return gulp.src('index.html') 
.pipe(revAll.revision()) 
.pipe(gulp.dest('build')); 

}); 

Nota: Utilizzato dontRenameFile opzione per escludere il file html venga revisionato

ho creato un esempio di lavoro a https://github.com/pra85/gulp-sass-filerev