Dépendances Front-end Bower avec Symfony

L’intégration et le suivi du cycle d’évolution des versions des librairies JavaScripts et Css dans un projet est bien souvent chose difficile. Aujourd’hui nous vous présenterons un outil qui vous permettra de ne plus vous en soucier : Bower.

Dans cet article nous vous présenterons Bower et comment l’utiliser dans un environnement Symfony sous Ubuntu.

Qu’est-ce que Bower

Bower est un outil qui gère les dépendances de toutes les librairies JavaScripts et Css utilisées dans un projet.

Installation

Bower étant un package Node.js installons ses dépendances au préalable.

sudo apt-get update
sudo apt-get install nodejs
sudo apt-get install npm

dépendances bower

Nous pouvons maintenant installer Bower à travers la commande suivante :

sudo npm install -g bower

bower installation

Initialisation

Nous allons créer un fichier de configuration bower.json avec la commande suivante :

bower init

Init Bower

Après avoir répondu à toutes les questions de l'initialisation, nous obtenons un fichier bower.json enregistré à la racine du projet.

{
  "name": "test",
  "authors": [
    "Hervé Patrick DOHOU <herve-patrick.dohou@netapsys.fr>"
  ],
  "description": "bower test pour symfony",
  "main": "",
  "license": "MIT",
  "private": true,
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
}

Bower config

Nous allons personnaliser l’emplacement de nos dépendances en créant un fichier : .bowerrc qui sera aussi à la racine du projet.

{
    "directory": "web/assets/vendor/"
}

bowerrc

Rajoutons aussi le nouveau dossier dans la section ignore de notre fichier bower.json juste après " tests"

{
  "name": "test",
  "authors": [
    "Hervé Patrick DOHOU <herve-patrick.dohou@netapsys.fr>"
  ],
  "description": "bower test pour symfony",
  "main": "",
  "license": "MIT",
  "private": true,
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests",
    "web/assets/vendor/"
  ],
}

Bower config

Installation des dépendances

Pour installer une dépendance, deux solutions possibles :

Mettre les dépendances dans le fichier bower.json créé précédemment
Installer individuellement notre dépendance en ligne de commande

A titre d’exemple nous verrons comment installer la dernière version des libraires suivantes :

jQuery
Twitter Bootstrap

Solution 1

Ajout d’une section "dependencies" après la section "ignore" du fichier bower.json.

"dependencies": {
    "jquery": "latest",
    "bootstrap": "latest"
}

dependencies

Une fois terminé nous pouvons lancer la commande suivante afin d'installer jquery et bootstrap :

bower install

solution 1 - install

Solution 2

Nous installons chaque libraire via la commande suivante :

bower install bootstrap jquery

solution 2 - install

NB : Pour installer une version spécifique d’une librairie, il vous suffit de la définir dans l’une des solutions précédentes.

Insertions des fichiers dans notre layout.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta content="width=device-width, initial-scale=1.0" name="viewport">
        <meta content="IE=Edge,chrome=1" http-equiv="X-UA-Compatible">
        <title>{% block title %}{% endblock %}</title>
    {% block stylesheets %}{% endblock %}
    <link rel="stylesheet" type="text/css"  href="{{ asset('assets/vendor/bootstrap/dist/css/bootstrap.min.css') }}">   
</head>
<body>
    
{% block body %}{% endblock %}

<script src="{{ asset('assets/vendor/jquery/dist/jquery.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('assets/vendor/bootstrap/dist/js/bootstrap.min.js') }}" type="text/javascript"></script>

{% block javascripts %}{% endblock %}
</body>
</html>

layout exemple

Deux Commandes utiles

bower update bootstrap  #mets à jour la dépendance bootstrap
bower uninstall bootstrap #désinstalle le package bootstrap

Conclusion

Plus besoin de copier-coller les librairies JavaScripts et Css dans nos projets, Bower nous facilite la tâche et nous permet d’avoir un projet à jour.

Pour aller plus loin vous pouvez voir toutes les possibilités offertes, les packages disponibles par Bower sur le site officiel ici.

Merci à tous.

Enregistrer

Le blog