Utiliser Bower Avec Symfony 2

Bower est un outil de gestion des dépendances front-end, c’est un composer mais pour les js et css.

Comme composer, Bower fonctionne en téléchargeant les libs à partir de github, ces libs sont indexées dans un catalogue récupérable à partir d’ici.

Installation de Bower

Bower est un package Node.js donc pour l’installer on aura besoin de node.js et aussi de git.

$ npm install -g bower

Après l’installation, nous devons créer le fichier bower.json, c’est comme composer.json mais il contiendra nos dépendances Front-end.

Nous pouvons créer le fichier bower.json interactivement avec la commande :

$ bower init

À la fin nous allons obtenir un fichier bower.json semblable à celui-ci :

{
  "name": "Bower Symfony Inegration",
  "version": "0.0.1",
  "authors": [
    "Mohammed Rhamnia"
  ],
  "description": "Utiliser Bower Avec Symfony 2",
  "keywords": [
    "Symfony",
    "Bower"
  ],
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ]
}

Le fichier bower.json doit être à la racine de votre projet dans le même emplacement que composer.json.

Avec Symfony, les assets sont installés dans le dossier « Resources/public » de votre bundle. Donc, nous allons indiqué à Bower l’emplacement exact où il doit télécharger nos dépendances. Ceci est effectué à travers le fichier .bowerrc placé aussi à la racine de votre projet, son contenu sera similaire à celui ci :

{
    "directory": "src/AppBundle/Resources/public/bower_components"
}

Supposons que notre projet aura besoin de :

  • La version 2.0 de jQuery
  • La dernière version de Twitter Bootstrap
  • La dernière version de Less

L’installation se fait via l’option install, nous pouvons indiquer les libs à installer après l’option ou nous pouvons mettre à jour le fichier bower.json pour indiquer les dépendances de notre projet :

    "dependencies": {
        "jquery": "2.0.0",
        "bootstrap": "latest",
        "less.js": "latest""
    }

et puis

$ bower install

ou directement :

$ bower install bootstrap less jquery#2.0.0

le « #2.0.0 » indique le tag 2.0.0 du repository jquery sur github.com.

Voila, nous arrivons à la fin de l’intégration de bower dans Symfony, il nous reste qu’ajouter les assets téléchargés dans nos twigs, voici un exemple :

{% javascripts
            '@AppBundle/Resources/public/bower_components/jquery/jquery.js'
            '@AppBundle/Resources/public/bower_components/less.js/dist/less.js'
            %}
            <script src="{{ asset_url }}"></script>
 {% endjavascripts %}
Publicités

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s