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 :
La commande grunt bower-install
ajoute cette ligne dans le fichier index.html
:
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 :
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.
Bonne rentrée ! 😉
Bonjour Katia,
Merci 🙂
Bises,
David