Process de développement de thème Moodle

Process de développement de thème Moodle

par Yann Soliveres,
Nombre de réponses : 5

Bonjour à tous,

J'ai dernièrement rejoint la communauté des développeurs Moodle,

Mon but est de customiser un thème simple que j'ai téléchargé ici : https://trema.tech/ (basé sur Boost) et installé /activé sans problème.

Je touche à présent au SCSS du thème avec le Theme Designer Mode activé, cela fonctionne mais le process est TRES long. 

J'ai aussi essayé avec le TDM off en purgeant le cache à chaque modification, mais rien ne change, et de toute façon c'est aussi très lent. 

J'ai l'habitude d'utiliser Gulp pour accélérer mon process de dev, ce qui permet aux changements SCSS de s'afficher instantanément, sans refresh la page. Le hic est que je ne peux pas appliquer cette technique ici puisque Moodle génère lui-même le css, fichier introuvable donc.

Est-ce que vous auriez un process similaire pour accélérer votre développement ? 

Merci !

Yann

-------------

Mes specs: 

- refurbished 2012 MacBook Pro (Mojave, 8 Go 1600 MHz DDR3 RAM , 2,9 GHz Intel Core i7 )

- Mamp with PHP 7.1.0 and MySQL 5.6.34 

- Moodle 3.8.1

Moyenne des évaluations  -
En réponse à Yann Soliveres

Re: Process de développement de thème Moodle

par Daniel Méthot,
Avatar Moodleurs particulièrement utiles
Bonjour Yann,
Pas de réponse de ma part, mais vous m'avez fait découvrir un très beau thème.
Daniel
Moyenne des évaluations  -
En réponse à Yann Soliveres

Re: Process de développement de thème Moodle

par Rémi Lefeuvre,
Bonjour Yann,
Bienvenue parmi nous sourire

Il y a plusieurs années maintenant, nous avons conçu chez nous un thème enfant du thème Bootstrap (https://github.com/bmbrands/theme_bootstrap) et nous avions rencontré un problème similaire au tien. Comme nous allons bientôt refondre notre thème en choisissant cette fois-ci Boost pour ascendant, j'ai fait quelques recherches et réalisé quelques tests pour voir.

Il est toujours possible de contourner le fonctionnement normal de Moodle mais ce n'est pas forcément simple et ça peut nécessiter la neutralisation des personnalisations Web permises par le thème que tu as choisi (et celles du thème parent). Pour ce premier message et au cas où cela suffirait, voici une solution relativement simple à mettre en place et qui ne casse rien clin d’œil

Il te faut installer LIBSASS et SASSC, ce que tu peux faire directement dans le dossier de ton thème theme/trema. Pour ce faire :
  • Ouvre le tutoriel suivant : https://github.com/sass/libsass/blob/master/docs/build-with-makefiles.md
  • Réalise uniquement les étapes : Get the sources, Compile the library et Compling sassc
  • Dans ton Moodle à la page Administration du site -> Développement -> Expérimental -> Réglages expérimentaux, indique le Chemin d'accès à SassC (pour moi cela donne /moodle/www/theme/trema/libsass/sassc/bin/sassc en absolu)
Avec cette méthode, tu n'as toujours pas de watcher mais le temps de compilation est beaucoup moins long (-40 % minimum).

Sources :
Moyenne des évaluations Utile (3)
En réponse à Rémi Lefeuvre

Re: Process de développement de thème Moodle

par Yann Soliveres,

Bonjour Remi,

Merci pour tous tes conseils !

Dommage pour watcher, ça me parait vraiment étrange que ce ne soit pas possible.

Je bloque cependant sur l'avant dernière étape, après avoir export le PATH, la commande make ne passe pas :

make: *** sassc: No such file or directory.  Stop.
make: *** [sassc/bin/sassc] Error 2

Une idée de ce qui peut clocher ?

Merci

Yann

Moyenne des évaluations  -
En réponse à Yann Soliveres

Re: Process de développement de thème Moodle

par stephane ngov,

Bonjour,

pour les "automatiser" les fichier du less /scss en css, je ne m'embête plus avec gulp ou grunt,

j'utilise l'ide visual studio community, il suffit pour cela d'ouvrir les répertoire moodle de créer un fichier mon_style.scss et une fois fait un ctrl+s , visual studio va créer automatiquement un fichier mon_style.css situé sur le même dossier.

comme cela fait longtemps que je n'ai pas touché au style de moodle,, si moodle utilise des "décorateur" pour générer d'autre ligne de css .

Il faudra aussi préalablement télécharger le plugin scss => en css ou less=> en css.

Fait un test rapide cela peut peut être suffisant si c'est juste pour générer du css facilement en développement.

Moyenne des évaluations  -
En réponse à Yann Soliveres

Re: Process de développement de thème Moodle

par Rémi Lefeuvre,
Salut Yann,

Vérifie que le dossier SASSC est bien à l'intérieur du dossier LIBSASS. Tu dois avoir libsass/sassc/bin/sassc !
Si ça ne marche pas, tu peux toujours tenter de placer SASSC hors de LIBSASS (dans le même dossier) pour tester...

Je n'ai pas le temps de tenter moi-même en ce moment mais voici une piste un peu plus complexe, t'inspirer de Boost :
  • copie la partie SASS du fichier Gruntfile.js qui se trouve à la racine de Moodle en l'adaptant et place-la dans un fichier Gruntfile.js dans theme/trema
  • ajoute un fonction theme_trema_get_precompiled_css dans theme/trema/lib.php à la manière de theme/boost/lib.php
  • ajoute la ligne suivante au fichier theme/trema/config.php : $THEME->precompiledcsscallback = 'theme_trema_get_precompiled_css';
  • il te faudra créer le watcher, tu peux t'inspirer de ce fichier : https://git.backbone.education/elea/vital/blob/master/Gruntfile.js
N'hésite pas à nous tenir informés des développements clin d’œil
Moyenne des évaluations Utile (1)