C’est la rentrée, et pour reprendre doucement, voyons comment exclure des fichiers de modules récupérés avec Bower et installés automatiquement avec la tâche Grunt bower-install.

grunt bower-install ?

Nous l’avions déjà vu, grunt bower-install permet d’inclure automatiquement les fichiers CSS et JavaScript récupérés avec Bower directement dans le fichier index.html de votre application Web.

En clair, après avoir installé le composant dans le projet avec cette commande :

bower install bootstrap --save

La commande grunt bower-install ajoute cette ligne dans le fichier index.html :

<!-- bower:css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<!-- endbower -->

Les fichiers CSS sont inclus entre les commentaires HTML bower:css et endbower, les fichiers JavaScript sont entre bower:js et endbower.

Ainsi, à chaque démarrage de la tâche bower-install, ces deux sections sont supprimées pour être complétement réécrites.

Selon la manière dont vous avez configuré bower-install dans Gruntfile.js, bower-install peut être exécuté au démarrage du serveur de développement (grunt serve), de la création du package (grunt build), …

Pourquoi exclure des fichiers ?

Optimiser et gagner en performance

Certains packages incluent automatiquement plusieurs fichiers, mais tous ne sont pas utiles à l’application.

En ne gardant que le strict nécessaire, l’application sera plus légère.

Eviter les erreurs

Dans certains cas, tous les fichiers sont ajoutés et peuvent entrer en conflit avec d’autres modules et provoquer des erreurs.

Passer à LESS

Un autre intérêt d’exclure des fichiers ajoutés automatiquement avec bower-install est la possibilité d’utiliser LESS (ou SCSS) à la place du fichier CSS, si le composant le propose.

Par exemple, en incluant Twitter Bootstrap dans le projet, vous pouvez exclure le fichier bootstrap.css et inclure le résultat de votre personnalisation, produit par le préprocesseur LESS, dans la partie vendor.css pour qu’il soit minifié et combiné par Grunt.

Comment faire

Tout se passe dans Gruntfile.js, dans la partie de configuration de bower-install :

bowerInstall: {
  app: {
    src: ['<%= yeoman.app %>/index.html'],
    ignorePath: '<%= yeoman.app %>/',
    exclude: [/un-fichier.js/, /dossier-du-composant/]
}
},

Vous pouvez :

• nommer précisément les fichiers, par exemple /mon-fichier.js/ pour empêcher l’ajout automatique de celui-ci
• inclure le nom du dossier, par exemple /mon-module/ pour ne pas inclure l’ensemble des fichiers d’un module.

Le mot de la fin

J’ai expérimenté cette configuration en utilisant le module blueimp-file-upload dont le module tmpl de blueimp entrait en conflit avec AngularJS.
Donc… à la semaine prochaine pour parler d’upload de fichiers avec AngularJS.

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