Quel(s) fichier LESS surveiller ?

[raphaelgoetter]

Une question collégiale de Coralie, Amélie et moi-même : quels sont les fichiers .less devant être "watchés" ?

Actuellement :

var path_less_src = './src/assets/css/styles.less';

cf. https://github.com/alsacreations/alstart/blob/master/gulpfile.js

Conséquence : seul le fichier styles.less est compilé (ça c'est bien) et surveillé (ça c'est moins bien).

Dans la pratique, styles.less ne fait qu'importer tous les fichiers de travail layout.less, paralax.less, etc. et du coup quand on modifie l'un de ces fichiers de travail... le watch et la compilation ne se font pas. Il faut toucher à styles.less pour que le watch opère.

Par contre, si on remplace par var path_less_src = './src/assets/css/*.less'; alors on a un autre problème : tous les fichiers .less deviennent des .min.css car il n'y a pas de concaténation prévue.

En fait, ce qu'il faudrait lors du watch, est :

• surveiller tous les *.less
• ne compiler que styles.less

Or pour le moment, une seule variable est prévue pour ce chemin.

Proposition (idée de Coralie) :

• on garde var path_less_src = './src/assets/css/styles.less';
• on ajoute var path_all_less_src = './src/assets/css/*.less';
• on remplace le watcher gulp.watch([path_less_src], ['styles-less']); par gulp.watch([path_all_less_src], ['styles-less']);

Moyen de faire moins compliqué ?

[jnoesser]

OK pour la proposition avec var path_all_less_src mais il faut quand même "watcher" le fichier styles.less pour éviter justement la création d'un fichier min.css pour chaque fichier .less.

Sur les derniers projets sur lesquels je suis intervenue j'ai du ajuster la configuration de gulpfile.js pour obtenir quelque chose comme ça : gulp.watch(['assets/css/*.less','assets/css/less-includes/*.less']

Donc avec ta proposition on devrait avoir : gulp.watch([path_less_src, path_all_less_src], ['styles-less']

[raphaelgoetter]

Mais var path_less_src (c'est à dire styles.less) est un sous-ensemble de var path_all_less_src donc il est de toute façon pris en compte avec :

gulp.watch([path_all_less_src], ['styles-less']

[jnoesser]

Ah oui désolée, j'ai lu trop vite. C'est OK comme ça alors. ;)

Par contre si on place les autres fichiers less dans un sous-dossier (ce que j'ai l'habitude de faire, surtout sur de gros projets), dans mes souvenirs ça ne fonctionne pas, il faut préciser le chemin du/des sous-dossier(s). Mais c'est un détail à adapter au cas par cas je pense, lorsqu'on met le projet en place.

[raphaelgoetter]

oui, je pense aussi.