Dépendances Front-end Bower avec Symfony

bower

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

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.