1. Introduction

Il est possible de développer un thème Liferay avec divers outils connu dans le monde Java (Liferay IDE ou Liferay Developer Studio ou jRebel). Cependant, ces outils prennent de la ressource inutiles pour un développeur qui ne fait que du thème. De plus, bien que ces outils déploient correctement les modifications apportées par le développeur après une sauvegarde de fichier, cela met un petit moment avant d’être correctement déployé dans le serveur (environ 2-3 secondes). Cela est dû à la compilation qu’effectue l’IDE avant d’être déployé. Donc si chaque changement de CSS par exemple peuvent prendre beaucoup de temps alors qu’il y a eu seulement un changement de couleur ou de pixel par exemple. A la fin de la journée, on aura perdu beaucoup de temps.

Sachant que les intégrateurs travaillent souvent avec des outils de textes (Notepad++, Sublime Text, Brackets ou Atom) qui permettent un changement instantané de la page web, il a fallu trouvé un moyen pour ces personnes de travailler sur les thèmes Liferay sans être dérangé par cette perte de temps.

Nous allons voir comment développer un thème Liferay avec Gulp qui est un outil qui permet d’automatiser les tâches de développement récurrentes et qui est basé sur NodeJS.

Un script Gulp va monitorer le code source du thème et dès qu’un fichier est modifié, il va injecter ces changements dans le serveur. Cela prends également en compte les fichiers SASS.

Avec ce script, plus besoin de IDE Java. Un simple éditeur de texte qui prend moins de ressources que les IDE Java suffit pour développer.

2. Pré-requis

• NodeJS doit être installé
• Gulp doit être installé
• Liferay n’importe quel version de lancer via le startup.bat/startup.sh avec le mode developer
• Le thème doit être déployé au moins une fois

3. Installation et configuration

• Créer un dossier nommé par exemple « gulp »
• Cloner le repository Liferay-Instant-Deploy-Theme-Changes-Gulp-Script
• Aller dans le dossiee une fois le clone fini
• Lancer la commande npm install
• Ouvrer le fichier gulpfile.js et éditer les variables suivantes (l’exemple donnée donne la description) :

• Lancer ensuite la commande gulp
• Vous pouvez désormais développer le thème avec n’importe quel éditeur de texte et voir les changements instantanés.

PS : Il est possible de faire du livereloading. Pour cela, il faut installer une extension de navigateur.

4. Problèmes rencontrés

Si aucun changement n’est remarqué :

• Vérifier que les changements ont bien été déployés dans le serveur en vérifiant directement le fichier dans le serveur (LIFERAY_HOME/TOMCAT/webapp/THEME/…)
• Vérifier la date du fichier. Il est possible que le fichier déployé avec une date dans le futur. Pour corriger cela, il faut modifier la timezone de Liferay dans le fichier setenv.bat / setenv.sh et mettre-Duser.timezone=GMT+2

5. Liens

https://github.com/emiloberg/Liferay-Instant-Deploy-Theme-Changes-Gulp-Script