Umgang mit Bildpfaden in CSS-Dateien bei der Verarbeitung durch Schluck

Question

Zuvor in meinen MVC-Anwendungen habe ich .NET verwendet, um meine CSS-Dateien zu optimieren (verketten, minimieren, usw.). Ich habe Klassen verwendet benutzerdefinierte Transformation, um Pfade in meinem CSS zu behandeln wie:

.brand { 
    background-image: url("../images/logo.png"); 
} 

oder sogar:

.brand { 
    background-image: url("/Content/images/logo.png"); 
} 

Ich habe hinzugefügt Schluck zu meinem letzten Projekt für Front-End-Tests und Ich dachte, ich würde es auch verwenden, um meine CSS- und JS-Dateien automatisch zu optimieren. Hier ist meine Aufgabe schluck CSS-Dateien zu verarbeiten:

var gulp = require('gulp'); 
var concat = require('gulp-concat'); 
var cssmin = require('gulp-minify-css'); 
var rename = require("gulp-rename"); 
var less = require('gulp-less'); 
var uglify = require('gulp-uglify'); 

gulp.task('styles', function() { 
    return gulp.src('./Content/custom/site.less') 
     .pipe(less()) 
     .pipe(gulp.dest('./dist/css')) 
     .pipe(cssmin()) 
     .pipe(rename({ 
      suffix: '.min' 
     })) 
     .pipe(gulp.dest('./dist/css')); 
}); 

Die CSS-Datei wird minimiert, uglified usw. erfolgreich, aber Links zu Bildern, zum Beispiel, sind falsch. Relative Pfade verweisen nun auf etwas wie http://localhost/site-folder/dist/css/Content/images/logo. Pfade, die ursprünglich so etwas wie /Content/images/logo.png waren, enden als http://localhost/Content/images/logo.png, aber leider berücksichtigen sie keine Domänenordner, die meine Site hat.

Irgendwelche Ideen?

Vielen Dank im Voraus

Answer 1

der Regel, was ich /dest, /public oder /build Verzeichnis am Ende tut schafft, die aus meiner Quelle getrennt ist. So kann ich in meinen Präprozessordateien einfach images/img.png sagen und sich nie um den korrekten Pfad kümmern, weil ich weiß, dass gulp Bilder immer im Build-Verzeichnis ablegt.

Ich mag auch diesen Stil, weil es mich zwingt, sicher zu überlegen, welche Dateien ich dem Benutzer zur Verfügung stellen werde und meinen Webserver so konfigurieren kann, dass er von dort nur statische Daten bereitstellt (siehe Pfad Traversal, etc) : Wenn Sie Express verwenden, siehe express.static()]). Ein weiterer Vorteil besteht darin, dass Sie eine separate Schluckaufgabe für die Komprimierung von Bildern oder die Erstellung von Sprites haben, was sich positiv auf die Leistung auswirkt. Während Sie keine so fortgeschrittene Konfiguration wie diese benötigen, empfehle ich Ihnen, gulp-starter https://github.com/vigetlabs/gulp-starter zu durchsuchen (insbesondere, um zu sehen, wie sie ihre Sass-Piping- und Bildkomprimierungsschritte durchführen).

Wenn diese Lösung nicht für Ihr Projekt geeignet ist, können Sie den Pfad von Ihrem Prozess abrufen. In Node ist dies einfach mit __dirname oder path.cwd() ... aber ich denke, das ist wahrscheinlich eine schlechtere Idee.

Answer 2

Der einfachste Weg wäre, gulp-replace in einer Rohrleitung für Ihre CSS zu verwenden, und ersetzen Sie Ihre aktuellen URLs mit der neuen Bildadresse. (Ich habe gulp-load-plugins auch require() aufblasen zu reduzieren.

Dies vorausgesetzt, dass Sie die Bilder auch in einer separaten Aufgabe migrieren.

var gulp = require('gulp'), 
    plugins = require('gulp-load-plugins'); // replaces all your requires 

var yourDirectory = "/Content/images/"; 

gulp.task('styles', function() { 
    return gulp.src('./Content/custom/site.less') 
     .pipe(plugins.less()) 
     .pipe(gulp.dest('./dist/css')) 
     .pipe(plugins.replace('url("../images/', 'url("' + yourDirectory) 
     .pipe(plugins.cssmin()) 
     .pipe(plugins.rename({ 
      suffix: '.min' 
     })) 
     .pipe(gulp.dest('./dist/css')); 
});