Tout s’est bien déroulé pendant le développement, votre application Web est jolie, le style rend bien, les icônes de Font Awesome dans les menus sont parlantes.
Mais, vous commencez les tests après avoir packagé avec grunt build, et là c’est le drame. Les icônes ont disparues !
La cause est simple : les fichiers de police utilisés par le CSS ne sont pas copiés.
Voyons comment ajouter une tache Grunt qui se charge de cette copie.
Le problème
Vous avez certainement l’habitude d’installer les composants avec bower, en l’occurrence Font Awesome :
Comme le composant est récupéré par bower, les fichiers CSS et fonts se trouvent dans bower_components.
Ainsi, pendant le développement, les fichiers sont lus depuis bower_components.
Mais, au moment du packaging avec grunt build, bower_components n’est pas recopié, parce que les fichiers CSS et JavaScript référencés dans index.html sont combinés et minifiés.
Ainsi, les dossiers de fonts sont absents du package.
En plus, au moment de la minification, les chemins relatifs sont changés pour pointer vers bower_components… alors qu’il n’existe pas dans la version distribuée.
La solution
Tout se passe dans Gruntfile.js, notamment dans la tache build, comme le problème se pose lors de la création du package.
Créer une nouvelle tache de recopie
Ici, il s’agit des fichiers de Font Awesome, mais vous pouvez ajouter le dossier fonts pour chaque composants dans le même cas.
Ajouter cette tache à grunt build
Corriger le problème de changement de chemin relatif
Au moment de la minification des fichiers CSS par grunt build, les chemins relatifs des fonts, des images, … sont réécrits pour pointer vers les fichiers dans le dossier bower_components, alors qu’il n’est plus censé exister dans le package.
Pour éviter ce problème, il est nécessaire d’indiquer à Grunt quel dossier racine utiliser pour la réécriture. En l’occurrence, comme les fichiers sont copiés dans fonts et que le CSS de Font Awesome pointe déjà sur ce dossier (../fonts), la nouvelle racine doit être vide.
Le mot de la fin
Et voilà, votre application est prête à être distribuée. Ou presque.
L'illustration de cet article est une image sous licence CC BY-SA 3.0 par TGWmechanics
Je débute avec Angular et tout le toutim…
votre blog m’apporte précieuse aide
mais là je coince un peu
je trouve 5 fichiers Gruntfile.js dans les node-modules de grunt ………
Bonjour michelbenay,
Dans l’article, je parle du fichier Gruntfile.js qui se trouve à la racine du projet.
Les autres, qu’il ne faut pas modifier, appartiennent aux modules utiles au projet, eux-mêmes construits avec Grunt. C’est pourquoi ils ont aussi un fichier Gruntfile.js.
David