Inclure Grunt et Bower dans Thelia

Pourquoi utiliser Grunt et Bower dans vos templates Thelia ?

Et bien tout simplement car si vous vous basez sur le template par défaut de Thelia, vous apercevrez dans le répertoire des assets (templates/frontOffice/default/assets/) que les fichiers less, js et font, de Bootstrap et FontAwesome sont présents.
Ainsi, si vous souhaitez faire un template en respectant la structure du template par défaut, vous allez logiquement dupliquer ce dernier afin de réutiliser les assets (du moins les fichiers less, js et font).
Et là, vous aurez donc deux fois les mêmes fichiers source, ce qui n'est pas très optimisé. De plus, la version de ces assets n'est peut être pas celle que vous désirez utiliser...

L'objectif est donc d'optimiser tout ça afin d'alléger votre template.

Initialiser Grunt

Grâce à votre terminal, placez-vous dans le repertoire des templates du frontoffice :

Ensuite, initialisez votre configuration Grunt avec la commande suivante :

Suite à cette manipulation, plusieurs informations vous seront demandées comme le nom de votre configuration, son numéro de version, etc... Après avoir renseigné ces informations, un fichier package.json va faire son apparition avec un contenu très proche de ceci : 

J'ai bien entendu supprimé les informations inutiles comme la licence...

Passons à la prochaine étape qui consiste à récupérer les librairies utiles à notre template, à savoir Bootstrap et FontAwesome.

Initialiser Bower

Toujours dans votre terminal, saisissez la commande suivante pour initialiser votre configuration Bower :

Ici aussi, plusieurs informations vous seront demandées, saisissez-les comme vous l'avez fait avec Grunt. Un nouveau fichier nommé bower.json est créé avec pour contenu quelque chose proche de ceci : 

Ensuite, demandez à Bower d'installer vos dépendances :

Les librairies vont être téléchargées et importées dans le répertoire bower_components.
De plus, votre fichier bower.json va être mis à jour avec les informations suivantes : 

En effet, l'argument --save permet de garder les dépendances en "mémoire" dans le fichier bower.json. Vous comprendrez l'utilité de ceci à la fin du tutoriel.

Passons maintenant à la création de notre structure de template.

Structuration du template

Dupliquez le répertoire default et nommez le comme vous le souhaitez (je l'appellerai demo).

Rendez-vous dans le répertoire assets/ et supprimez les répertoires (ainsi que leurs fichiers) css, font, js/bootstrap, less/bootstrap et less/fontawesome.

Modifiez ensuite le fichier less/styles.less pour mettre à jour les chemins vers Bootstrap et FontAwesome :

Ici, la version de FontAwesome que vous chargez est la plus récente contrairement à celle fournie avec le template de défaut. Il va donc falloir mettre à jour les fichiers .less du template de défaut car l'appel aux icônes se fait via la fonction .icon() qui n'existe plus désormais. De plus, certaines variables ont été renommées depuis, il faut donc aussi les remplacer par leur nouveau nom.

Si vous ne faites pas cette étape, la compilation via Grunt ne pourra pas être faite car le système vous indiquera qu'il y a des erreurs d'appel à la fonction .icon() ainsi qu'à certaines variables dans votre code.

Jusque là, si vous compilez votre fichier styles.less à la main, cela fonctionnera mais les polices d'écriture ne seront pas trouvées. Il va donc falloir les déplacer dans votre projet. Retournons sur Grunt !

Le module "copy"

En effet, nous allons pouvoir utiliser Grunt afin de lui dire de déplacer les fonts de Bootstrap et FontAwesome dans notre projet. Il va donc falloir installer un petit module pour Grunt nommé grunt-contrib-copy :

Un nouveau repertoire va alors faire son apparition : node_modules c'est ici que seront stockés les modules Grunt dont vous aurez besoin. L'argument --save a exactement le même rôle qu'avec Bower.

Créons maintenant notre fichier de configuration Grunt, qui devra se nommer Gruntfile.js et qui devra se trouver au même niveau que node_modules. 

Ensuite, dans votre terminal, lancez la tâche copy de Grunt :

Si tout s'est bien passé, les polices de Bootstrap et FontAwesome devraient se trouver dans demo/assets/font/. Votre css compilé est donc maintenant capable de récupérer les polices nécessaires.

Créons maintenant une tâche qui va compiler vos fichiers LESS automatiquement.

Le module "less"

Pour cela, nous allons avoir besoin du module grunt-contrib-less qui sera aussi stocké dans le répertoire node_modules :

Passons à la création de la tâche Grunt au niveau du fichier Gruntfile.js : 

N'oubliez pas de rajouter le chargement du module :

Vous pouvez ensuite lancer la commande pour exécuter votre nouvelle tâche (il se peut que vous ayez des erreurs si le LESS de Thelia ne supporte pas les nouvelles variables de FontAwesome) :

Un fichier min.css vient normalement d'être créé dans demo/assets/css/.

Ensuite, occupons-nous des fichiers javascript. Nous allons installer deux modules, un qui permet de vérifier la bonne syntaxe de nos scripts et un second qui concatène les fichiers en un seul et qui le minifie.

Les modules "jshint" et "uglify"

Ces deux modules sont : grunt-contrib-jshint et grunt-contrib-uglify. Installons-les de la même manière que les autres modules Grunt :

(Et oui, vous pouvez les mettre les uns à la suite des autres !)

Ajoutons maintenant leurs configurations au fichier Gruntfile.js :

Sans oublier de charger ces modules :

Et voilà, vous pouvez désormais vérifier la syntaxe de votre fichier demo/assets/js/script.js avec la commande :

Vous allez d'ailleurs logiquement vous heurter à des erreurs. Je vous conseille d'en corriger un maximum. Néanmoins, sachez que vous pouvez spécifier à jshint de ne pas analyser certaines lignes en rajoutant le commentaire suivant après la ligne que vous souhaitez ignorer :

Information : Pour plus d'informations sur jshint, n'hésitez pas à consulter la documentation en ligne (http://jshint.com/docs/)

Vous pouvez aussi concaténer et minifier vos scripts javascript avec la commande :

Nous en avons terminé pour la configuration de base qui vous permet donc de copier les polices d'écriture de Bootstrap et FontAwesome dans votre template, de compiler les fichiers Less, de vérifier la syntaxe de vos scripts javascript et de minifier ces derniers.

Mais ce n'est pas fini ! Nous allons maintenant optimiser nos tâches Grunt afin de n'avoir à saisir qu'une seule commande pour lancer toutes les tâches.