Guide du débutant : Démarrer avec le gestionnaire de paquets Bower

Bower est un gestionnaire de paquets frontal construit par Twitter. Également connu sous le nom de gestionnaire de paquets pour le Web, bower est utilisé dans les projets open source et closed source modernes pour résoudre de nombreux problèmes récurrents.

Cet article vous guidera à travers l’utilisation de base de bower et l’utilisation avancée pour un environnement d’équipe. Je partagerai également mon flux de travail personnel lors de l’utilisation de bower avec une équipe de développeurs.

Problèmes que bower résout

Développer un site Web ou une application Web nécessite aujourd’hui l’utilisation de nombreux frameworks frontaux, tels que Bootstrap, jQuery, Angular, etc.

1. Télécharger chacun de ces paquets nécessite de naviguer sur le site Web correspondant, de trouver la version appropriée, de la télécharger, de la décompresser et enfin de déplacer les fichiers principaux vers le dossier du fournisseur. (ex : le fichier main dans le paquet jquery est jquery.js)
2. Après avoir téléchargé les fichiers dans votre référentiel, vous devez visiter manuellement tous les sites web ci-dessus (jquery.com, angularjs.com, bootstrap.com) pour vérifier les mises à jour et devinez quoi ? S’il y a une mise à jour, vous devez répéter l’étape 1 pour chaque paquet/mise à jour.
3. Supposons que nous allons utiliser Bootstrap qui nécessite jQuery (appelé dépendance). Lorsque vous allez sur getbootstrap.com pour le télécharger, vous devrez ensuite naviguer sur jquery.com pour télécharger jquery également.

En résumé, bower vous aide à gérer vos paquets frontaux. Il vous aide à les télécharger, à les mettre à jour et à résoudre leurs dépendances.

Il y a d’autres avantages à utiliser bower que nous aborderons plus tard dans cet article, mais ce sont les principaux problèmes que bower résout pour nous !

Installation et utilisation

Installation de bower

Bower est un module node, et peut être installé avec la commande suivante :

npm install -g bower

Cela installera bower globalement sur votre système.

Si node n’est pas installé sur votre ordinateur, vous devez le télécharger depuis nodejs.org.

Installation de paquets

Pour les besoins de ce tutoriel, nous utiliserons bower pour installer bootstrap. Le processus fonctionnera pour tout autre paquet.

bower install bootstrap

Ceci installera bootstrap dans le dossier /bower_components nouvellement créé (au niveau de la racine).

Notez que cela va installer bootstrap 3.2.x qui est la dernière version au moment de l’écriture de cet article. Si nous voulons installer la dernière version en 2.x, nous devons exécuter :

bower install bootstrap#2

nous pouvons également spécifier la version exacte avec

bower install bootstrap#2.2

Notez également que parce que bootstrap dépend de jQuery, l’exécution de l’une des commandes précédentes installera automatiquement jQuery également, afin de résoudre les dépendances de bootstrap.

Mise à jour des paquets

Si nous voulons mettre à jour tous nos paquets, il nous suffit d’exécuter la commande suivante :

bower update

Inclure les scripts

La dernière étape serait d’inclure les styles et les scripts téléchargés. Puisqu’ils résident tous à l’intérieur du dossier /bower_components, nous devrons écrire ce qui suit:

<link rel="stylesheet" type="text/css" ref="bower_components/bootstrap/dist/css/bootstrap.css"><script src="bower_components/jquery/dist/jquery.js"></script><script src="bower_components/jquery/dist/js/bootstrap.js"></script>

Flux de travail commun dans un environnement d’équipe

Après avoir utilisé bower de la manière minimaliste ci-dessus, nous réalisons qu’il introduit de nouveaux problèmes lors du travail avec le contrôle de la source et/ou dans un environnement d’équipe.

1. Bower ne télécharge pas seulement les fichiers de distribution principaux, mais il télécharge également le dépôt entier de jquery, bootstrap, etc. Cela peut gonfler votre historique de contrôle de révision et n’est absolument pas recommandé.
2. Aussi, les fichiers de distribution principaux (dist/jquery.js, dist/css/bootstrap.css) ne sont pas minifiés, et bower ne minifiera jamais les fichiers de distribution parce que c’est un gestionnaire de paquets, pas un outil de construction.
3. Vous devez vous assurer manuellement de charger jquery avant de charger bootstrap (parce que bootstrap a jquery comme dépendance).
4. Vous devez ajouter manuellement une nouvelle balise <script> pour chaque nouveau paquet (et peut-être un nouveau <link rel= »stylesheet »/> s’il contient des fichiers css.

Étape 1 : Installez bower

et assurez-vous que chaque personne de votre équipe l’installe aussi globalement.

Étape 2 : Excluez bower_components du contrôle de révision

Ajoutez bower_components à votre .gitignore. Cela demandera à Git d’ignorer tout le fichier bower_components. De cette façon, chaque développeur (dans une équipe) aura une copie locale des bibliothèques frontales requises. Ne vous inquiétez pas que chaque développeur ait une version différente. Nous allons régler cela dans quelques temps.

Étape 3 : Installer les paquets requis

Installer les paquets frontaux requis, disons jQuery et bootstrap.

bower install jquery#1 bootstrap --save

Le drapeau --save demandera à bower de créer (s’il n’existe pas) un fichier bower.json et d’y inclure les paquets installés. Voici un exemple du fichier bower.json généré:

{ "name": "package name", "version": "2.9.0", "private": true, "dependencies": { "bootstrap": "~3.2.0", "jquery": "1", }}

Notez comment il y a une contrainte de version ~3.2.0. Cela garantira que tous les membres de l’équipe travailleront sur la même version de bootstrap, le tilde signifie que la raison doit être raisonnablement proche de la raison spécifiée.

Étape 4 : Les membres de l’équipe peuvent maintenant exécuter : bower install

Lorsque tout développeur ayant accès au référentiel exécute bower install, il installe toutes les dépendances (bootstrap et jquery dans ce cas).

Pour les étapes restantes, nous avons besoin de Grunt ou Gulp.

Étape 5 : Intégrer avec des outils de build

Grunt et Gulp sont des outils de build, utilisés pour automatiser des tâches communes et récurrentes, telles que le minage des scripts, l’optimisation des images, le minage des feuilles de style, la compilation de less/sass/stylus. Bower joue bien avec Grunt/Gulp grâce à ses plugins prêts à l’emploi. Dans ce tutoriel, je vais couvrir Grunt, cependant vous trouverez une alternative similaire pour Gulp.

Grunt a un plugin appelé grunt-bower-concat qui compile tous les fichiers principaux pour chaque composant bower que vous avez dans un fichier bower.js. Que vous pouvez ensuite utiliser Grunt pour minifier (uglify), ce qui donne bower.min.js.

Grunt bower concat exemple de configuration:

bower_concat:{ all: { dest: "src/js/vendor/bower.js", destCss: "src/css/vendor/bower.css" }},

Note : si vous utilisez Gulp, un plugin similaire existe à : https://github.com/ck86/main-bower-files/

Note : pour Ruby on Rails et autres, consultez le lien suivant : http://bower.io/docs/tools/

Étape 6 : Inclure les scripts

Avec les scripts suivants, vous incluez vos scripts une fois et chaque fois que vous ajoutez un nouveau paquet frontal, il sera automatiquement concaténé dans le fichier correspondant (bower.css ou bower.js)

<link rel="stylesheet" type="text/css" ref="src/css/vendor/bower.css"><script src="src/js/vendor/bower.js"></script>

Étape 7 : Plus d’automatisation de bower

Vous pouvez automatiser davantage bower. Disons que vous travaillez dans une équipe et que vous ajoutez un nouveau composant bower (bower install typeahead.js). Vous ne voulez pas envoyer un courriel à tout le monde pour leur dire d’exécuter bower install. Nous pouvons l’automatiser avec grunt-watch et grunt-exec:

watch: { less: { files: , tasks: },},exec: { bower_install: { cmd: "bower install" }}

Ce qui se passe ici, c’est que chaque fois que vous modifiez le fichier bower.json, grunt exécute automatiquement la commande bower install. Lorsque vous commettez vos changements, et que votre collègue tire votre code, grunt-watch détectera un changement dans bower.json qui exécutera alors automatiquement la commande bower install.

Comment je personnalise bower dans mon propre flux de travail

Quand il s’agit de gestionnaires de paquets, j’en utilise beaucoup dans mon flux de travail. J’utilise npm pour gérer grunt et ses plugins. Composer pour gérer mes bibliothèques de fournisseurs PHP, bower pour gérer mes paquets front-end et enfin ruby gems pour gérer Capistrano (un paquet qui est utilisé pour automatiser les déploiements).

J’ai décidé que je voulais que npm soit le main gestionnaire de paquets. J’ai donc commencé à envelopper toutes les commandes principales à l’intérieur de la section script de mon package.json. Par exemple :

• npm run migrate : migre la base de données et génère des fichiers de migration (spécifiques à PHP)
• npm test : exécute des tests unitaires
• npm run protractor : exécute des tests de bout en bout
• npm run deploy-staging : déploie le code sur les machines de staging
• npm run deploy-production : déploie le code sur les machines de production
• npm start : exécute npm install (pré-démarrage), bower update (post-installation) et enfin grunt

Voici ce qui se passe en coulisse. Considérez le fichier package.json suivant :

{ "name": "test project", "version": "2.9.0", "private": true, "devDependencies": { "bower": "^1.3.9", "grunt-bower-concat": "^0.4.0", "grunt-contrib-uglify": "^0.5.1", "grunt-contrib-watch": "^0.6.1", "grunt-exec": "^0.4.6", }, "scripts": { "prestart": "npm install", "postinstall": "bower update --unsafe-perm", "start": "grunt" }}

Si vous regardez la section des scripts, vous verrez que prestart: nous exécutons npm install. Parce que le package.json est inclus dans notre référentiel, si quelqu’un ajoute une nouvelle devDependency, nous devons être en mesure d’installer la même version facilement. (Notez que pre start est la première commande déclenchée lorsque vous exécutez npm start).

post install (qui est déclenché par npm install), exécute la commande suivante : bower update --unsafe-perm(le --unsafe-perm n’a été ajouté que parce que bower-update échouait sur un Mac). Cela permettra de garder tous nos paquets frontaux à jour.

start:et enfin la commande start exécute grunt.

Avec cette configuration, chaque fois qu’un développeur de votre équipe veut commencer à travailler sur le projet, il navigue simplement dans le répertoire du projet et exécute npm start pour commencer à travailler immédiatement.

L’utilisation de cette approche est très efficace car vous pouvez inclure d’autres scripts à exécuter à partir de npm, comme npm run migrate, npm run deploy-staging, etc.

En utilisant cette approche, nous n’encourageons pas seulement l’utilisation de la ligne de commande et l’automatisation, nous la rendons en fait uniforme.

Vous pouvez voir que nous avons lié npm install avec bower update. Vous pouvez aller plus loin et lier tous vos autres gestionnaires de paquets avec npm install. Dans ce cas, l’exécution de npm install exécuterait toutes les commandes suivantes:

• bower update
• composer update --no-dev
• gem update

Enveloppez-le

Bower est un outil étonnant qui résout les problèmes fondamentaux des applications web modernes. Toutes les personnes sont encouragées à l’utiliser (et même le nouveau Visual Studio est livré avec Bower et Grunt/Gulp de nos jours).

Il peut être facilement mis en place lors d’un développement solo, cependant si vous travaillez en équipe, vous devez faire suivre les étapes présentées dans cet article pour assurer un flux de travail fluide entre tous les développeurs de l’équipe.