web-dev-qa-db-fra.com

Compilez les fichiers .less en .css après chaque mise à jour

J'ai installé le noeud, et le npm. Avec npm j'ai téléchargé moins.

Et quand je le fais

lessc styles.less styles.css -x -w

dans terminal, il compile et compresse le code, mais ne surveille pas le fichier pour y apporter des modifications, car je m'attends à MOINS à compiler automatiquement et à actualiser la page automatiquement. Donc, si je modifie mes styles sans, à chaque fois, je dois aller au terminal et entrer la commande pour compiler le moins de css.

En outre, le compilateur ne montre même pas les erreurs de compilation.

S'il vous plaît, guidez-moi sur la façon d'atteindre ce qui précède. C'est mon premier jour avec MOINS CSS.

command-linecompilingcss
5
STEEL

Il existe maintenant une méthode beaucoup plus simple.

Installez NodeJs. Et via NPM installer less-monitor

https://www.npmjs.org/package/less-monitor

3
STEEL

En termes simples, l'argument -w n'existe pas.

$ lessc --help
usage: lessc [option option=parameter ...] <source> [destination]

If source is set to `-' (dash or hyphen-minus), input is read from stdin.

options:
  -h, --help              Print help (this message) and exit.
  --include-path=PATHS    Set include paths. Separated by `:'. Use `;' on Windows.
  -M, --depends           Output a makefile import dependency list to stdout
  --no-color              Disable colorized output.
  --no-ie-compat          Disable IE compatibility checks.
  -l, --lint              Syntax check only (lint).
  -s, --silent            Suppress output of error messages.
  --strict-imports        Force evaluation of imports.
  --verbose               Be verbose.
  -v, --version           Print version number and exit.
  -x, --compress          Compress output by removing some whitespaces.
  --yui-compress          Compress output using ycssmin
  --max-line-len=LINELEN  Max line length used by ycssmin
  -O0, -O1, -O2           Set the parser's optimization level. The lower
                          the number, the less nodes it will create in the
                          tree. This could matter for debugging, or if you
                          want to access the individual nodes in the tree.
  --line-numbers=TYPE     Outputs filename and line numbers.
                          TYPE can be either 'comments', which will output
                          the debug info within comments, 'mediaquery'
                          that will output the information within a fake
                          media query which is compatible with the SASS
                          format, and 'all' which will do both.
  -rp, --rootpath=URL     Set rootpath for url rewriting in relative imports and urls.
                          Works with or without the relative-urls option.
  -ru, --relative-urls    re-write relative urls to the base less file.
  -sm=on|off              Turn on or off strict math, where in strict mode, math
  --strict-math=on|off    requires brackets. This option may default to on and then
                          be removed in the future.
  -su=on|off              Allow mixed units, e.g. 1px+1em or 1px*1px which have units
  --strict-units=on|off   that cannot be represented.

Report bugs to: http://github.com/cloudhead/less.js/issues
Home page: <http://lesscss.org/>

Cependant, vous pouvez utiliser inotify pour surveiller les modifications et obtenir à peu près ce que vous voulez:

while inotifywait -r styles.less; do
    lessc -x styles.less styles.css;
done

Mise à jour 2019 : Bien que lessc soit quelque chose que j'utilise encore directement, à l'occasion, j'ai tendance à me pencher vers un plein webpack pile ces jours-ci.

Ce n'est pas tout à fait aussi destructeur d'âme qu'il paraît de loin, mais cela peut prendre un certain temps (et la confiance) de se mettre en place. Surtout si vous avez des idées préconçues sur la façon dont ces éléments devraient fonctionner.

Et oui, je suis sûr que d'ici à l'été 2019, le Webpack sera un projet mort et que tous les clients branchés auront passé à autre chose. C'est juste le risque ici. La bonne chose à faire est qu’il s’agit en définitive d’une couche qui se superpose à des éléments tels que LESS et SASS et divers langages de script, et c’est uniquement du côté du client. Vous pouvez donc continuer à être un dinosaure aussi longtemps que vous le souhaitez.

5
Oli

Utilisez less-watch-compiler :

Installer globalement 

$ (Sudo) npm install -g less-watch-compiler

Utilisation sans fichier principal 

$ less-watch-compiler FOLDER_TO_WATCH FOLDER_TO_OUTPUT

Utilisation avec le fichier principal 

$ less-watch-compiler FOLDER_TO_WATCH FOLDER_TO_OUTPUT main.less
1
Andrea