Compile arquivos .less em .css após cada atualização

Question

Eu instalei o nó e o npm. Com o npm baixei menos.

E quando eu faço

lessc styles.less styles.css -x -w

no terminal, ele compila e compacta o código, mas não assiste ao arquivo em busca de mudanças, já que estou esperando que o LESS compile e atualize automaticamente a página. Então, se eu fizer qualquer alteração nos meus estilos. A menos que eu tenha que ir ao terminal e digitar o comando para compilar o menos css.

Além disso, o compilador NÃO mostra nenhum erro de compilação.

Por favor, orientem-me sobre como alcançar o acima. Este é meu primeiro dia com menos CSS.

    

Answer 1

Existe agora um método muito mais fácil.

Instale os NodeJs. E via NPM instalar menos-monitor

link

    

Answer 2

Simplificando, o argumento -w não existe.

$ 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/>

No entanto, você pode usar o inotify para observar as alterações, e isso faz aproximadamente o que você deseja:

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

Para uma melhor estratégia de longo prazo, convém consultar o Grunt que tem seu próprio modo de exibição.

    

Answer 3

Use menos-watch-compilador :

Instalar globalmente

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

Uso sem arquivo principal

$ less-watch-compiler FOLDER_TO_WATCH FOLDER_TO_OUTPUT

Uso com o arquivo principal

$ less-watch-compiler FOLDER_TO_WATCH FOLDER_TO_OUTPUT main.less