Cache Büste Hintergrundbilder in meinem CSS mit Gulp, ohne meine SASS bearbeiten zu müssen?

Question

Ich möchte Büste Hintergrundbilder in meinem CSS Cache. Also, wenn mein ursprünglicher Stil:

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

kann eine Zeichenfolge hinzugefügt:

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

oder der Dateiname geändert werden:

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

Anstatt einen Zufallsgenerator mit oder Die Zeitstempel-ID verwendet gerne einen Hash der Bilddatei, so dass der Cache nur bei Bedarf unterbrochen wird (wenn sich die Datei tatsächlich geändert hat).

Im mit SASS und Gulp so konnte ich Gulp Cache Buster und Gulp Hasher verwenden:

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

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

Das Problem, das ich mit ihnen haben, ist, dass es, wie Sie Ihre ändern müssen schaut SASS. Also, wenn Sie mit dieser beginnen:

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

Sie müssen es, dies zu ändern:

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

ich meine SASS schön und sauber halten wollen und es nicht auf diese Weise zu modifizieren. Ist das möglich?

Answer 1

Die Art, wie ich es sehe, haben Sie zwei Optionen - beide würden die Hasher und Cache-Busting-Plugins verwenden, die Sie aufgeführt:

1. Schreiben Sie eine Schluckaufgabe, die automatisch ASSET{ ... } um alle URLs in Ihrer CSS-Datei hinzufügt. Dies würde passieren nach Verkettung und vor Hashing/Busting. Da Sie eine Prämie für diese Frage haben, lassen Sie es mich wissen, wenn Sie möchten, dass ich diese Aufgabe schreibe. Ich schlage vor, Sie nehmen einen Stich, obwohl b/c Sie einige nette Dinge lernen können.

2. Ideale Lösung: Das Cache-Busting-Plugin verfügt über eine Option zum Definieren der Regex zum Suchen von Assets. Standardmäßig ist die Regex auf /ASSET{(.*?)}/g festgelegt, aber Sie könnten leicht auf etwas zu aktualisieren, um gute alte Vanille CSS url(...) s entsprechen.Nochmals, da Sie ein Kopfgeld haben, lassen Sie es mich wissen, wenn Sie Hilfe bei der Regex wollen - aber ich schlage vor, Sie nehmen einen Stich drauf b/c Sie könnten etwas ordentlich lernen (pssst, Sie wollen data: URLs ignorieren).

   diese Regex im Cache Büste config-Versuchen:
   /url\((?!['"]?data:)['"]?([^'"\)]*)['"]?\)/g

   Wenn Sie URLs ignoriert werden sollen, die mit „http“ beginnen (das heißt, sie auf einer anderen Domain gehostet ist), dann die folgende regex verwenden. Dies setzt voraus, dass alle Wege zu Ihrem Vermögen relativ sind, was sie sein sollten:
   /url\((?!['"]?(?:data|http):)['"]?([^'"\)]*)['"]?\)/g
   http://www.regexpal.com/?fam=94251

   Wenn Sie die CSS-Attribute definieren können, wollen die URLs haben gehasht/gesprengt, können Sie die folgende , die nur für URLs gilt, die in background, background-image und list-style CSS-Attributen definiert sind. Sie können mehr hinzufügen, indem ein Rohr | sowie den Namen des Attributs nach |list-style Zugabe:
   /(?:background(?:-image)?|list-style)[\s]*:[^\r\n;]*url\((?!['"]?(?:data|http):)['"]?([^'"\)]*)/g
   http://www.regexpal.com/?fam=94252

Answer 2

Sie können gulp-rev-all verwenden. Es wird in der Lage sein, den Dateien Hash hinzuzufügen und sie neu zu schreiben, ohne dass Sie Ihrer SASS-Datei ein zusätzliches Markup hinzufügen müssen.

Eine sehr einfache schluck-Datei für das gleiche würde so aussehen -

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

}); 

Hinweis: Gebrauchte dontRenameFile Option aus der HTML-Datei ausschließen revisioned wird

ich ein funktionierendes Beispiel bei https://github.com/pra85/gulp-sass-filerev erstellt haben