Bevor ich diese Frage stelle, möchte ich darauf hinweisen, dass es hier severalsimilarquestionsposted auf StackOverflow gibt, aber keiner von ihnen bietet eine genaue Lösung für das Problem.Relative Pfade in CSS und Grunt Minification?
Das Problem
Ich habe einen Workflow Setup wo Grunt für eine Produktionsumgebung und minifies mehrere CSS-Dateien in einer einzigen Datei kombiniert.
Das Problem, mit dem ich konfrontiert bin, ist, dass Schriftart und Bildpfade nach dem Ausführen von Grunt brechen, da sie immer noch auf ihre vorhandenen relativen Dateipfade zeigen.
Als Beispiel:
Innerhalb static/homepage/startup/common-files/css/icon-font.css ich die folgende CSS-Regel haben:
@font-face{font-family:Flat-UI-Icons;src:url(../fonts/Startup-Icons.eot);
In meinem Gruntfile ich fest, dass ich die Ausgabe meiner minimierte CSS-Datei style.min.css bei static/css/custom/homepage/ gelegen sein wollen . Das Problem dabei ist, dass sich der Dateipfad ändert, wodurch alle Schrift- und Bildabhängigkeiten nicht mehr gefunden werden und im Browser ein 404-Status zurückgegeben wird.
Was ich zu versuchen, diese ich
getan zu lösen haben gedacht, dass es 2 Möglichkeiten, dieses Problem zu beheben:
- Kopieren Sie alle abhängigen Dateien so, dass sie in Bezug auf das neue Verzeichnis, in dem sich
style.min.cssbefindet. Der Nachteil ist, dass es schnell unordentlich wird und meine Projektordnerstruktur ruiniert! - Ändern Sie die Pfade manuell von Hand. Aber dann, was ist der Sinn darin? Grunt wurde für die Automatisierung von Aufgaben entwickelt!
Weiß jemand, wie man dieses Problem behebt? Ich habe fast 10 Stunden damit verschwendet und ich gebe langsam auf. Leute haben behauptet, das Problem über das Github issue page behoben zu haben, aber niemand sagt wirklich, wie sie es reparierten.
EDIT:
Ich habe durch die clean-css library Quellcode geschaut und es scheint, dass Sie eine relativeTo Eigenschaft zum minifier Objekt passieren kann. Ich hatte ein Chaos damit, aber ich bin immer noch fest. Ich melde mich zurück, wenn ich weiterkomme.
EDIT:
Okay, ich habe endlich eine Dokumentation, die erklärt, was relativeTo (und andere) Eigenschaften tun. Ich steckte noch auf genau das, was meine Konfiguration obwohl für meine Dateistruktur sein sollte ....
relativeTo - path to resolve relative @import rules and URLs
root - path to resolve absolute @import rules and rebase relative URLs
roundingPrecision - rounding precision; defaults to 2; -1 disables rounding
target - path to a folder or an output file to which rebase all URLs
Hier ist meine Grunt Konfigurationsdatei als Referenz:
module.exports = function(grunt) {
grunt.initConfig({
concat: {
homepage: {
src: [
'static/homepage/startup/common-files/css/icon-font.css',
'static/homepage/startup/flat-ui/bootstrap/css/bootstrap.css',
'static/homepage/startup/flat-ui/css/flat-ui.css',
'static/homepage/static/css/style.css'
],
dest: 'static/css/custom/homepage/compiled.css',
}
},
cssmin: {
homepage: {
src: 'static/css/custom/homepage/compiled.css',
dest: 'static/css/custom/homepage/style.min.css'
}
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks("grunt-css-url-rewrite");
grunt.registerTask('build', ['concat', 'cssmin']);
grunt.registerTask('default', ["build"]);
};
Dank.
Ich habe das gleiche Problem, stundenlang versucht, mit 'relativeTo', 'Ziel' und 'root' ohne Erfolg zu spielen:/ – jitowix
Ich bin vielleicht nah an einer Lösung! Sehen Sie meinen Kommentar hier (mein Benutzername ist jjmpsp): https://github.com/yeoman/grunt-usemin/issues/225 –
Ok ich werde versuchen, es morgen zu betrachten. (Ich fühle schon den Schmerz ^^) – jitowix