Les fichiers font d’Awesome (ou autre) ne sont pas dans le package avec yo angular

Les fichiers font d'Awesome (ou autre) ne sont pas dans le package avec yo angular

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 :

bower install font-awesome --save

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

		copy: {
			[...]
			styles: {
				[...]
			},
			// customisation to add font files from CSS libraries:
			fonts: {
				expand: true,
				flatten: true,
				cwd: '<%= yeoman.app %>',
				dest: '<%= yeoman.dist %>/fonts',
				src: ['bower_components/components-font-awesome/fonts/*']
			}
		},

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

	grunt.registerTask('build', [
		[...]
		'ngmin',
		'copy:fonts', // customisation to add font files from CSS libraries
		[...]
	]);

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.

		[...]
		// The following *-min tasks produce minified files in the dist folder
		cssmin: {
			options: {
				root: '' // customisation to add font files from CSS libraries
			}
		},
		[...]

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

Cet article vous a été utile ? Partage it !

2 réflexions au sujet de « Les fichiers font d’Awesome (ou autre) ne sont pas dans le package avec yo angular »

  1. 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 ………

    1. 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

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Si vous le souhaitez, renseignez le champ 'Nom' de cette façon : 'VotreNom@VotreMotClef' pour obtenir une ancre optimisée pour les moteurs de recherche.