Les crashs dev d'un passionné

Par habitude, lorsqu'un développeur a besoin d'une librairie JS il copie simplement le lien dans la page. De nos jours, les sites web nécessitent plusieurs bibliothèques et les dépendances entre chacunes peut vite tourner au casse tête. Des outils permettent de gérer cela : composer pour PHP et npm pour JS.

Dans cet exemple nous allons mettre en place le package jQuery dans composer pour Symfony.

Voici le fichier composer.json de mon projet, avec la partie liée à jQuery

{
 "require": {
       ...
        "jquery/jquery": "2.*"
    },
    "repositories": [  
        {  
            "type": "package",  
            "package": {  
                "name": "jquery/jquery",  
                "version": "2.1.1",  
                "source":{  
                    "url":"https://github.com/jquery/jquery.git",  
                    "type":"git",  
                    "reference":"2.1.1"  
                }  
            }  
        }  
    ],
    "scripts": {
        "pre-install-cmd":  "cd vendor/jquery/jquery && npm install -g grunt-cli",
        "post-install-cmd": [
            ...
            "cd vendor/jquery/jquery && npm install",  
            "cd vendor/jquery/jquery && grunt dist:../../../app/Resources/public/js/"
        ],
        "post-update-cmd": [
            ...
            "cd vendor/jquery/jquery && grunt dist:../../../app/Resources/public/js/"
        ]
    },
}

• Le require faire référence au dépôt (voir ci-après) avec le nom de la propriété name et comme valeur la version souhaitée. Ici jQuery sera >= 2.1.1 
• Le repositories permet de spécifier un dépot distant pour les sources. 
• Reference est le nom de la branche donc pour la version 2 de jQuery c'est master. Attention master ne comprend pas le dossier dist nécessaire lorsque le fichier jquery.js est généré. Il faut remplacer master par le tag choisi, soit 2.1.1
• La version est un déclaratif donnant la version de la librairie, par exemple  
• Scripts permet de lancer des commandes avant et après la commande install ou update de composer. 

Cette méthode a cependant un inconvénient, il faut supprimer le dossier jquery dans vendor pour que la mise à jour soit prise en compte.
Si vous ne souhaitez pas customiser votre jQuery, utilisez donc le dépot de packagist

 "require": {
       ...
       "components/jquery": "2.*"
    }

Cependant après avoir fait un composer install vous remarquez que votre librairie est à la fois dans components/jquery et vendor/components/jquery. Pour éviter les doubons il suffit de préciser le chemin de destination dans composer.json de votre application comme ceci

...
"config": {
 "component-dir": "vendor"
}
...

Ainsi le dossier de destination sera ./vendor et plus ./components

Nous allons maintenant passer à la configuration de votre machine.
Installez Git (http://git-scm.com/) et ajoutez le chemin dans le PATH , pour moi l'installation c'est faite dans C:\Program Files\Git\bin;C:\Program Files\Git\cmd;
Pensez à relancer la console pour que les modifications soient prises en compte



Intallez nodejs (il comprend npm) en choisissant l'executable Windows.

Ajoutez C:\Users\david\AppData\Roaming\npm dans le PATH.
Pensez à relancer la console pour que les modifications soient prises en compte.

Rendez vous ensuite dans le dossier qui contient votre GruntFile.js et package.json, à savoir vendor/jquery/jquery, pour installer les dépendances via npm

npm install

Et installez grunt avec

npm install -g grunt-cli

Puis on lance le build via grunt

grunt

Cette commande permet de générer le fichier jquery voulu, il est possible de le customiser aussi avec grunt custom:-ajax.Dans cet exemple jQuery est configuré avec le module ajax.

Ensuite il faut placer le fichier dans l'espace web en ajoutant grunt dist:../../../app/Resources/public/js/ au cmd grunt de post-install-cmd et post-update-cmd.

Vous avez remarqueré surement que toutes ces étapes correspondent à la commande composer install. En effet toutes les commandes vues sont dans les scripts pre-install-cmd et post-install-cmd

Nous allons configurer maintenant Symfony pour que l'on puisse faire un lien vers le fichier généré.

Dans le fichier config.yml mettre le raccourci de ce fichier qui portera le nom de jquery_js

assetic:   
 assets:     
  jquery_js:       
   inputs:         
    - "%kernel.root_dir%/Resources/public/js/jquery.min.js"

Il suffit de l'appeler dans le layout comme cela

{% javascripts '@jquery_js' '@your_own_javascript' combine=true %}  
    <script type="text/javascript">  
    (function() {  
      var asset = document.createElement('script');  
      asset.type = 'text/javascript';  
      asset.async = false;  
      asset.src = '{{ asset_url }}';  
      var s = document.getElementsByTagName('script')[0];  
      s.parentNode.insertBefore(asset, s);  
    })();  
    </script>  
  {% endjavascripts %} 

Finir par composer update si vous voulez mettre à jour vos autres librairies.

A partir de maintenant votre projet peut être mis à jour via composer update.
Pensez à mettre la bonne version de jQuery dans version et reference de composer.json (ou dans components/jquery) et composer fait tout pour vous, plutôt cool non ?