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 !