Percorsi relativi nella minificazione CSS e Grunt?

Question

Prima di porre questa domanda, voglio sottolineare che ci sono severalsimilarquestionsposted qui su StackOverflow, ma nessuno di questi fornisce una soluzione accurata al problema.

---

Il problema

Ho una configurazione del flusso di lavoro in cui Grunt unisce e minifies più file css in un singolo file per un ambiente di produzione.

Il problema che sto affrontando è che i percorsi di font e immagine si stanno rompendo dopo aver eseguito Grunt, poiché stanno ancora puntando verso i loro percorsi di file relativi esistenti.

Per fare un esempio:

Entro static/homepage/startup/common-files/css/icon-font.css Ho la seguente regola CSS:

@font-face{font-family:Flat-UI-Icons;src:url(../fonts/Startup-Icons.eot); 

Nel mio Gruntfile, ho specificare che io voglio l'uscita del mio file css minified di essere style.min.css trova a static/css/custom/homepage/ . Il problema è che il percorso del file cambia, con il risultato che tutte le dipendenze di font e immagini non vengono più trovate e restituiscono uno stato 404 nel browser.

Quello che ho fatto per cercare di risolvere questo

Ho capito che ci sono 2 opzioni per risolvere questo problema:

1. Copiare tutti i file dipendenti in modo che siano relative al la nuova directory in cui risiede style.min.css. Il lato negativo di questo è che potrebbe diventare rapidamente disordinato e rovinare la struttura delle cartelle del progetto!
2. Modificare manualmente i percorsi manualmente. Ma poi di nuovo, qual è il punto in questo? Grunt è stato progettato per automatizzare le attività!

Qualcuno sa come risolvere questo problema? Ho sprecato quasi 10 ore su questo e sto iniziando a mollare. Le persone hanno affermato di aver risolto il problema allo Github issue page, ma nessuno dice veramente come l'hanno risolto.

EDIT:

Ho guardato attraverso il codice sorgente clean-css library e sembra che è possibile passare una proprietà relativeTo all'oggetto minifier. Ho avuto un casino con questo, ma sono ancora bloccato. Ti riporterò se riuscirò ad andare oltre con questo.

EDIT:

Ok ho finalmente trovato un po 'di documentazione che spiega che cosa relativeTo (e altri) le proprietà fanno. Sono ancora bloccato su esattamente ciò che la mia configurazione dovrebbe essere per la mia struttura di file anche se ....

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 

---

Ecco il mio file di configurazione Grunt per riferimento:

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

Grazie.

Answer 1

Questa non è necessariamente una risposta diretta alla tua domanda, ma una possibile soluzione. IMO, potresti stare meglio se rifatti un po 'la struttura delle tue directory e fai un tweek del tuo gruntfile.

Nuova struttura:

project-root 
    /assets 
    /styles 
     (various css files) 
    /scripts 
     (js files) 
    /images 
     (image files) 
    /fonts 
    /vendor (if needed) 
     /plugin files 

Se si aggiunge in alcuni compiti grugnito, come ad esempio imagemin e copy, è possibile avere i file inseriti in una nuova struttura di directory in cui salvare o alterati:

project-root 
    /assets 
    /dist 
    /styles 
     /styles.css 
     /styles.min.css 
    /scripts 
     /scripts.min.js 
    /images 
     (minified images) 
    /fonts 
     (minified fonts) 

Per chiarire ulteriormente:

• concatenare file css in dist/styles/style.css, poi minify quel file in dist/styles/style.min.css
• file concatenare js in dist/scripts/scripts.js, quindi minify quel file in dist/scripts/scripts.min.js
• immagini di uso per minify le immagini aggiunte alla cartella assets/images e copiare i per dist/images
• uso copia copiare i font da assets/fonts in dist/fonts

il nuovo flusso di lavoro sarebbe solo per lavorare all'interno della directory assets, aggiungere tutto delle tue immagini lì, tutti i tuoi font, ecc. Tuttavia, dovresti fare riferimento alle risorse in relazione al file quando viene emesso nella cartella dist.

Tutti i fogli di stile, gli script, ecc. Rimandano alla cartella dist.

Inoltre, tutte le tue risorse saranno belle e sottili poiché la maggior parte di esse passa attraverso una sorta di minificazione.

Se è necessario disporre di file del fornitore, come plug-in, ecc., È possibile aggiungere una directory del fornitore (meglio ancora aggiungerli con Bower anziché manualmente) e quindi includere i file necessari nelle attività concatenative appropriate.