We apologize for untranslated text, you can use the Google Translation button to get an automatic translation of the web page in the language of your choice.

Utilisation de LESS en développement

Sébastien BERRUER · on 10/9/14 at 9:24 AM

Quelle est la méthode pour "forcer" la recompilation des fichiers .less (dans la version JCMS 8 ou à venir) ?

Est-ce que la seule solution est l'installation du plugin DevTools ? N'y a-t-il pas d'autres alternatives :

  • passage d'un paramètre dans l'URL ?
  • création d'une commande exécutable dans l'environnement Eclipse ?
  • ... ?
28 pts
Kevin Bransard - on 10/16/14 at 3:03 PM
Best answer

Mea Culpa Thomas Legat, effectivement, j'ai fait une erreur.

Je récapitule donc tout ce que nous avons dit pour les diverses possibilités permettant de recompiler les less : 

  • Utilisation du module devTools, avec liens dans la topbar pour recompilation full/partielle
  • Recompilation via le mode auto
    • "channel.less-compile.auto" et "channel.dev-mode.enabled" à TRUE
    • Cette recompilation ne fait pas une compilation intégrale (Seulement si un fichier est modifié).
  • Appel direct aux méthodes du ResourceHelper (Développement spécifique)
  • Compilation au redémarrage via la propriété "channel.less-compile.startup" à TRUE
  • Compilation via les paramètres dans l'url (nécessite "channel.dev-mode.enabled" sur TRUE) : 
    • less-compile=true : recompilation de tous les .less
    • less-compile=false : recompilation simple des fichiers modifiés

A noter que JCMS9 apporte le paramètre partial=true, qui fait un touch sur le fichier core.less, afin de forcer la recompilation de notre fichier core.css (Mais vous n'aurez pas normalement à l'utiliser, sauf si vous surchargez nos variables via le fichier custom.less qui permet d'overrider nos variables.less et celles de bootstrap.

12 pts
Thomas LEGAT · on 10/9/14 at 10:55 AM

Vous pouvez utiiser cette propriété:
channel.less-compile.auto: true

Cette propriété aura pour effet de recompiler les less modifiées à chaque chargement de pages. A ne pas utiliser en production évidemment...

#1

Pour mon test, j'ai :

  • ajouté cette propriété dans le custom.prop
  • ajouté un fichier plugin-test.less dans le dossier css de mon plugin
  • déclaré ce fichier (dans le plugin.prop) à l'aide de la directive

== channel.less.plugins/MonPlugin/css/plugin-test.css: plugins/MonPlugin/css/plugin-test.less ==

  • demandé l'insertion du fichier CSS généré à l'aide de la directive (dans le plugin.prop)

channel.css.all.300.fo: plugins/MonPlugin/css/plugin-test.css

Pourtant, lorsque je fais des modifications sur le fichier less et que je recharge une page, rien ne se passe...

Sébastien BERRUER · on 10/10/14 at 5:21 PM
#2

"channel.less-compile.auto: true" sert seulement à compiler les .less au démarrage de votre webapp. Il faut donc redémarrer la webapp à chaque fois pour recompiler les .less.

Sinon il faut soit utiliser :

  • Le ResourceHelper comme montré dans ma réponse
  • Le module DevTools

Il est peut-être possible d'utiliser des outils externes qui écoutent les fichiers .less et les recompile à chaque fois comme (Je les ai très peu testé pour ma part) :

Kevin Bransard · on 10/10/14 at 6:10 PM
#3

Kevin Bransard : Ne serais ce pas plutôt la propriété: channel.less-compile.startup qui a une influence sur la compilation des .less au démarrage?
D'ailleurs le fichier jcms.prop, à l'air d'être d'accord:

# Compile less file on each page (do not force)
channel.less-compile.auto: false
# Compile less file at startup (do not force)
channel.less-compile.startup: true
Dans notre cas nous avons:

  • channel.less-compile.auto: true
  • channel.less-compile.startup: false

, ce qui nous évite en phase de développement d'avoir la compilation des .less au démarrage mais de les avoir à chaque chargement de page dans le cas ou le .less a été modifié.
Nous n'avons pas le plugin DevTools d'installer!

Sébastien BERRUER : Nous n'utilisons par contre pas la propriété channel.css.all.300.fo. Nous incluons directement la CSS dans notre gabarit à partir de la méthode: jcmsContext.addCssHeader("");

Thomas LEGAT · on 10/10/14 at 8:19 PM
2 pts
Kevin Bransard · on 10/9/14 at 3:46 PM

Vous pouvez aussi vous faire une jsp qui recompilera vos .less en utilisant le code suivant : 

<%@ include file='/jcore/doInitPage.jspf' %>
boolean full = getBooleanParameter("full",false);
ResourceHelper.getInstance().compileLESS(full);

compileLESS(true) recompile tous les less ce qui peut prendre du temps.

compileLESS(false) recompile seulement les fichiers qui ont été modifiés. 

Juste un détail : si vous avez un fichier plugin.less qui contient d'autres fichiers less, il faudra que le fichier plugin.less soit enregistré pour qu'il soit recompilé via le compileLESS(false).

1 pt
Sylvain DEVAUX · on 10/12/14 at 1:30 PM

Nous utilisons beaucoup le DevToolsPlugin qui propose 3 liens de recompilation à la volée depuis la topbar :

  1. uniquement le fichiers modifié
  2. le fichier modifié et son LESS conteneur
  3. tous les LESS (plusieurs minutes!)
0 pts
Mickaël Formont · on 10/16/14 at 12:21 PM

Pour recompiler les less sans redémarrer JCMS et sans module complémentaire (à condition d'être en mode développement -> channel.dev-mode.enabled:true et d'être connecté)

http://localhost:8080/jcms?less-compile=false

0 pts