bower premier pas

Premier pas avec Bower

Bower est un petit utilitaire permettant de gérer simplement et rapidement l’ensemble des librairies que l’on peut utiliser sur des projets Front-end.

Bower qu’est-ce que c’est ?

Bower est un système de gestion de paquets pour le développement Web Front-end (côté client). C’est un outils développé en Javascript qui fonctionne avec Node.js . Il fonctionne avec git et les dépôts GitHub . Il a été initialement développé pour Twitter par Jacob Thornton , co-créateur du framework Bootstrap , qui a contribué à faire connaître Bower.

(Traduit de Wikipedia : https://en.wikipedia.org/wiki/Bower_%28software%29)

En clair Bower est un outils qui se charge d’ajouter automatiquement les sources de divers librairies externes (Bootstrap, jQuery, modernizr etc…) nécessaires au fonctionnement de votre projet.

Installer Bower

Pré-requis

Si vous avez lu la définition de Bower ci-dessus, vous l’aurez sans doute devinez, avant d’installer Bower, vous aurez besoin d’avoir ces deux éléments d’installer sur votre machine :

  • Node.js
  • Git

Pour l’installation de node.js, je vous renvois sur le site officiel de node.js.

Idem pour installer git sur votre machine : Installation de Git.

Installation de Bower

Une fois que vous avez installer Git et Node.js, ouvrez un terminal et lancez cette commande :

npm install -g bower

Utilisation de Bower

Maintenant que Bower est installé, voyons comment l’utiliser en installant une dépendance dans votre projet.

Placez-vous dans le répertoire de votre projet puis lancez cette commande pour inclure le framework Bootstrap à votre projet :

bower install bootstrap

Cela va créer simplement un répertoire nommé bower_components contenant la dépendance installée dans votre projet.

Modifier le répertoire par défaut

Si vous souhaitez modifier ce comportement, il suffit de créer un fichier .bowerrc en y indiquant le répertoire souhaitez de cette manière :

{
  "directory": "lib/"
}

Installer une version spécifique d’une dépendance

Pour cela, dans la commande d’installation, après le nom du paquet ajoutez un « # » puis indiquez simplement la version désirée ce qui donnera :

bower install bootstrap#v4-dev

Exemple d’installation de version 4 en développement de Boostrap

Gérer plusieurs dépendances dans un projet

Pour cela le plus simple est de passer par un fichier qui listera l’ensemble des dépendances nécessaires à votre projet.

Pour générer ce fichier, utilisez la commande init :

bower init

Répondez aux questions que l’on vous pose pour finaliser la génération du fichier bower.json.

Un fois le fichier généré, ouvrez le afin d’y inclure le nom et les versions des dépendances de votre projet, au niveau de dependencies :

{
  "name": "testproject",
  "authors": [
    "Codekillr"
  ],
  "description": "Init project",
  "main": "index.html",
  "keywords": [
    "base",
    "project",
    "barebone"
  ],
  "license": "MIT",
  "homepage": "index.html",
  "private": true,
  "dependencies": {
    "bootstrap": "#v4-dev",
    "modernizr": "latest"
  }
}
Enregistrez le puis lancez simplement la commande install pour que toutes vos dépendances soient installées :

 bower install

Mettre à jour vos dépendances

Pour mettre à jour l’ensemble de vos dépendances (contenues dans le fichier bower.json), lancez simplement la commande update :

bower update

Si vous désirez mettre spécifiquement un seul paquet à jour il suffit de spécifier le nom du packet :

bower update bootstrap

Mon avis sur bower

J’avoue m’être un peu tardivement mis à bower. Ce n’est pas un outil révolutionnaire mais il permet facilement d’automatiser certaines tâches, en ce sens il a toute sa place dans la tools box du développeur web. Je le trouve assez pratique pour mettre à jour toutes les dépendances ou pour lister d’un coup d’oeil les dépendances utilisées par un projet. Dès que possible je l’utilise pour mes nouveaux projets.

Sources :

Alsacréations

bower.io