Comment réécrire les urls des images dans les fichiers CSS du fournisseur en utilisant Grunt

Question

J'essaie de faire sortir les dépendances frontend du système de contrôle de version. Une combinaison de Bower.io et Grunt devrait être capable de le faire.

Un problème cependant se produit que je suis encore incapable de résoudre avec regrouper plusieurs bibliothèques de fournisseur. Par exemple suppose que j'ai la structure de répertoire suivant où les composants répertoire est le répertoire qui Bower.io enregistre les dépendances dans:

├── assets 
└── components 
    ├── bootstrap 
    │   ├── img 
    │   │   └── glyhs.gif 
    │   └── less 
    │    └── bootstrap.css 
    └── jquery-ui 
     ├── css 
     │   └── style.css 
     └── images 
      ├── next.gif 
      └── prev.gif 

Supposons maintenant que je veux regrouper style.css et Bootstrap des deux jQuery » bootstrap.css. Je vais enregistrer ce fichier groupé dans assets/bundled.css. Cependant, dans ce fichier, les références aux images d'origine (../images/next.gif et ../img/glyhs.gif) sont incorrectes. Ils devront être réécrits pour fonctionner (donc ../images/next.gif => ../components/jquery-ui/images/next.gif). Je crois que (d) cette réécriture d'URL est quelque chose que Grunt devrait être capable de faire. Mais je n'arrive pas à faire fonctionner ceci en utilisant les tâches cssmin/less/copy. Par exemple, la configuration Grunt suivante (uniquement déplacer 1 fichier) ne fonctionne pas:

module.exports = function (grunt) { 
    grunt.initConfig({ 
     pkg: grunt.file.readJSON('package.json'), 
     less: { 
      options: { 
       compile: false, 
       relativeUrls: true 
      }, 
      bootstrap: { 
       src: 'components/bootstrap/less/bootstrap.less', 
       dest: 'assets/bootstrap.css' 
      } 
     } 
    }); 
    grunt.loadNpmTasks('grunt-contrib-less'); 
    grunt.registerTask('dist-css', ['less']); 
}; 

Soit:

• Ai-je mal configuré Grunt ou fait quelque chose de mal?

• Ou est le flux de travail que je décris simplement pas le bon et devrais-je utiliser un autre à la place.

Merci!

Answer 1

Juste pour référence: il y a maintenant une solution facilement disponible. J'ai posté ce même problème dans le plugin CleanCss grunt, et ils l'ont accepté et publié ce comportement dans leur nouvelle version 1.1.

Vous pouvez trouver la question sur le tracker GitHub ici: https://github.com/GoalSmashers/clean-css/issues/129

Cette bibliothèque permet d'utiliser soit ré-écriture absolue (à partir d'un répertoire racine) ou de modifier les chemins relatifs à partir d'un nouveau répertoire de sortie. Recherchez les directives --root ou --ouput.

Merci pour les conseils et les réponses des gens!

Answer 2

Vous devez effectuer une recherche/un remplacement sur votre fichier dist css pour générer les chemins relatifs corrects. Il y a un certain nombre de plugins grunt qui peuvent le faire pour vous, personnellement, je préfère grunt-replace. Configurez vos actifs non compressés avec des variables et produire un css dist avec les URL générées dynamiquement .. Alors:

body { 
    background:url(@@IMG_PATH/background.jpg); 
} 

Devient ceci dans dist:

body { 
    background:url(path/to/background.jpg); 
} 

Hope this helps.

Answer 3

Vous probablement wat à jeter un coup d'oeil à ce paquet grunt https://github.com/Ideame/grunt-css-urls. Ce paquet semble être destiné à résoudre exactement votre problème.

Editer: après avoir regardé ce plugin je n'a pas aimé l'idée de réécrire mon balisage afin de rendre mon processus de construction plus lisse. J'ai donc fini par écrire ma propre petite fonction qui fait la réécriture pour moi.

J'utilise le plugin concat de grunt pour regrouper mes fichiers css. La bonne chose à propos de ce plugin est qu'il prend en charge la fonction de traitement de fichiers avant la concaténation.Maintenant mon gruntfile ressemble à ceci:

grunt.initConfig({ 
concat: { 
    options: { 
    separator: '\n', 
    process: function (src, filepath) { 
     var cssPatt = new RegExp('app(\/.*\/).*\.css$'); 

     //filter out everithing except css files 
     var file = cssPatt.exec(filepath); 

     if (file) { 
      var urlPatt = /url\(\'(.*)\'\)/g; 

     console.log('In file: ' + filepath); 

     //replace every url(...) with its absolute path 
     return src.replace(urlPatt, function (match, p1) { 
      console.log(' * ' + match + ' -> ' + 'url(\'' + file[1] + p1 + '\')'); 
      return 'url(\'' + file[1] + p1 + '\')'; 
     }); 
     } 

     return src; 
    } 
    }, 
}