Qu’est-ce qui est si génial à propos de Bower ?

Ce qui suit est un billet invité de Dan Sundy de Helios Design Labs. Dan va à la fois expliquer comment utiliser Bower et présenter un argumentaire pour le faire, du point de vue de quelqu’un qui a résisté à l’idée au début.

Lorsque j’ai commencé à travailler avec Bower, je n’ai pas tout à fait compris l’attrait. « Sérieusement ? » J’ai pensé. « Maintenant, c’est trop de travail de télécharger et de décompresser un fichier ? ». Je n’étais pas non plus super excité à l’idée de fourrer un tas de nouvelles commandes dans un cerveau qui était déjà gonflé aux coutures avec Git, Grunt, Gulp, Jekyll, Node, etc.

Il y a deux choses que je dirais à cette version de moi-même d’il y a une demi-année. Premièrement, Bower peut faire un peu plus que télécharger un fichier ou deux. Deuxièmement, passer une heure à apprendre un outil qui éliminera une tâche répétitive en vaut la peine.

D’abord les choses : Que diable est Bower ?

Pour les non-initiés, Bower est un gestionnaire de paquets. Il est bon pour, eh bien, gérer les paquets – tout ce pour quoi vous dépendez d’un auteur externe. Les bons exemples sont les frameworks CSS comme Bootstrap, les bibliothèques comme jQuery, les plugins jQuery, ou les frameworks JavaScript comme Angular. Le site officiel de Bower, Bower.io, le dit probablement le mieux :

Les sites web sont faits de beaucoup de choses – des frameworks, des bibliothèques, des actifs, des utilitaires et des arcs-en-ciel. Bower gère toutes ces choses pour vous.

Bower fonctionne en allant chercher et en installant des paquets de partout, en prenant soin de chasser, trouver, télécharger et sauvegarder les choses que vous cherchez.

Prérequis

Il y a certaines choses dont vous aurez besoin avant de commencer à travailler avec Bower:

• La ligne de commande. Ouaip, c’est un outil de ligne de commande (c’est vrai que ce n’est pas si effrayant).
• Node et NPM. Bower est un module Node, donc pour l’obtenir vous avez besoin de NPM.
• Git. Les paquets Bower sont des dépôts Git. Bower utilise Git pour comprendre où se trouve le paquet, sur quelle version il est, ce genre de choses.
• Installation globale. Techniquement, vous pourriez l’installer dans chaque projet, mais vous voudrez probablement l’avoir partout.

Pour installer Bower globalement:

$ npm install -g bower

Note : Selon votre configuration, vous devrez peut-être utiliser `sudo npm install -g bower` pour l’installer globalement.

Les bases

Pour commencer, imaginez la structure de répertoire pour un nouveau site. Le mien ressemble généralement à quelque chose comme ceci:

|-.git/|-dist/|-node_modules/|-src/| |-assets/| |-css/| |-fonts/| |-js/| | |-lib/| | |-main.js| || |-sass/| | |-style.sass| || |-index.html||-.gitignore|-gulpfile.js|-package.json|-README.md

Il y a un dossier `src` où le gros du travail de développement est fait. Une tâche de construction Gulp finira par tout préparer et compiler notre code optimisé dans un dossier `dist` prêt pour la production.

Disons que vous voulez inclure jQuery dans ce projet. Habituellement, vous allez sur jquery.com, trouver et cliquer sur le bon lien de téléchargement, puis dézipper et mettre les fichiers dans le bon répertoire.

Avec Bower, il suffit d’exécuter la commande suivante :

$ bower install jquery

Maintenant un répertoire `bower_components` avec un dossier `jquery` est apparu.

|-.git/|-bower_components/| |-jquery/||-dist/|-node_modules/|-src/| |-assets/| |-css/| |-fonts/| |-js/| | |-lib/| | |-main.js| || |-sass/| | |-style.sass| || |-index.html||-.gitignore|-gulpfile.js|-package.json|-README.md

jQuery a facilité l’obtention de son code en créant et en enregistrant un paquet pour Bower. La plupart des bibliothèques et des frameworks populaires ont fait de même. Si vous voulez vérifier que l’actif que vous voulez est un paquet Bower, vous pouvez faire une recherche:

$ bower search <package-name>

S’il n’est pas enregistré, il est toujours possible de saisir des dépôts avec des points de terminaison git comme ceci:

$ bower install git://github.com/example-user/example-package.git

Avancé : Si vous voulez être fantaisiste, vous pouvez même installer des dépôts privés auxquels vous avez accès. Consultez ce tutoriel vidéo de Rob Dodson.

Voici d’autres commandes de base que vous pouvez utiliser pour afficher et gérer les actifs que vous avez installés.

Listez tous vos paquets :

$ bower list

Ayez des informations sur tout paquet que vous avez installé :

$ bower info <package-name>

Vérifiez les mises à jour avec :

$ bower check-new

Puis, s’il y a des mises à jour, mettez à jour un paquet :

$ bower update <package-name>

Mais peut-être que la mise à jour vers la dernière version a cassé quelque chose.

Installer toute version spécifique-ancienne ou nouvelle-avec :

$ bower install <package-name>#<version>

Ce n’est certainement pas une liste exhaustive. Si vous êtes intéressé à commencer, je vous recommande de faire un projet de test et de travailler à travers l’un des nombreux tutoriels qui peuvent être trouvés en ligne. Celui de Treehouse est excellent : Getting Started with Bower. Ensuite, vous pouvez creuser dans toutes les commandes en vérifiant l’API de Bower.

Hé, mais attendez, il y a plus !

La petite équipe de dev avec laquelle je travaille utilise Bower depuis environ un an. Alors que la gestion des paquets via la ligne de commande était formidable, je n’étais pas vendu jusqu’à ce que nous commencions à utiliser les fichiers `bower.json` et `.bowerrc`.

.bowerrc

Le fichier `.bowerrc` peut faire un certain nombre de choses, mais je l’ai surtout vu utilisé pour changer le nom et l’emplacement du répertoire `bower_components`. (Cela m’a rendu heureux parce que je détestais avoir ce dossier aléatoire `bower_components` flottant à la racine du projet).

Voici à quoi peut ressembler un fichier `.bowerrc`:

{ "directory": "src/components"}

L’option directory envoie les paquets à un emplacement qui a le plus de sens-dans ce cas, le répertoire `src/`. Jetez un œil à la nouvelle structure du projet:

|-.git/|-dist/|-node_modules/|-src/| |-assets/| |-components/| | |-jquery/| || |-css/| |-fonts/| |-js/| | |-lib/| | |-main.js| || |-sass/| | |-style.sass| || |-index.html||-.gitignore|-.bowerrc|-gulpfile.js|-package.json|-README.md

Notez que le dossier `bower_components/` a disparu et qu’il y a un dossier `components/` dans le répertoire `src/`.

Avancé : C’est une bonne idée d’utiliser quelque chose comme gulp-usemin ou grunt-usemin pour s’occuper de la concaténation et de la minification pour tous les styles et scripts supplémentaires.

Alors, comment le fichier `bower.json` peut-il nous aider ?

bower.json

Le fichier `bower.json` ressemble beaucoup au `package.json` de Node. C’est un fichier manifeste qui vous permet de spécifier des options. Jetons un coup d’œil à un exemple (qui peut être généré en exécutant bower init):

{ "name": "bower-example", "version": "0.0.0", "authors": >" ], "description": "An example project using bower.", "main": "index.html", "license": "MIT", "private": true, "ignore": , "devDependencies": { "jquery": "~2.1.1" }}

Beaucoup de ces options sont là dans le cas où vous enregistrez ce repo comme un paquet Bower. Mais vous voyez l’objet devDependencies tout en bas ? Cet objet sera mis à jour automatiquement si vous ajoutez --save-dev à une commande Bower, comme ceci:

$ bower install jquery --save-dev

Maintenant si un collègue codeur exécute `bower install`, l’ordinateur installera tout ce qui se trouve dans la liste devDependencies dans le dossier spécifié dans `.bowerrc`. De même, si un développeur ajoute un paquet ou met à jour une version de paquet en utilisant --save-dev, toute l’équipe peut synchroniser ses actifs en utilisant bower install (après avoir tiré vers le bas la dernière version du fichier `bower.json`).

Puisque tout le travail de chasse et de collecte a été éliminé avec le fichier `bower.json`, il n’y a plus besoin de versionner aucun de ces actifs. Le dossier `components/` peut être ajouté au fichier `.gitignore` pour garder votre dépôt mince et méchant.

*.DS_Store.sass-cachenode_modules/dist/src/components/

Parting Shot

J’écoutais un épisode de mon podcast de développement web préféré (wink, wink) et les hôtes discutaient pour savoir si Bower était réellement utile, ou juste une mode passagère. Ils se demandaient si son but était de faciliter le téléchargement ou s’il était utilisé pour mettre à jour les versions de vos bibliothèques, comme le font les ruby gems. Ils en ont parlé comme d’un « NPM front-endy » (je paraphrase).

La beauté est qu’il fait toutes ces choses. Vous pouvez l’utiliser pour télécharger et garder le code à jour, mais vous pouvez aller plus loin. Bower peut vous aider à garder les bibliothèques de projet et les frameworks en synchronisation, ou l’intégrer avec d’autres outils comme Yeoman pour rogner encore plus de temps sur votre configuration de dev. De plus, vous pouvez créer et enregistrer vos propres paquets Bower afin de pouvoir les installer et les mettre à jour dans tous vos projets rapidement (et en toute sécurité).

Oh, et concernant la question qui a lancé la discussion : Vous n’utiliseriez pas Bower pour installer WordPress, et WordPress ne devrait pas être dans votre dossier `bower_components`. Mais vous pourriez utiliser Bower dans votre thème WordPress pour gérer les actifs externes (il suffit de ne pas charger des bibliothèques comme jQuery qui sont déjà incluses dans le noyau de WordPress).