自动编译不能正常工作

时间:2014-01-03 18:12:34

标签: css compilation less

我已经安装了node和npm。用npm我下载的更少。

当我做的时候

lessc styles.less styles.css -x -w

在终端中,它编译并压缩代码,但不会观察文件的变化,因为我希望LESS能够自动编译和刷新页面。所以,如果我对我的样式进行任何更改。无论如何我每次都要去终端并输入命令来编译较少的CSS。

此外,编译器甚至不会显示任何编译错误。

请指导我如何实现上述目标。这是我使用LESS CSS的第一天。

2 个答案:

答案 0 :(得分:2)

简单地说,-w参数不存在。

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

但是,您可以使用inotify来监视更改,这大致可以实现您的目标:

while inotifywait `-r styles.less`; do

    lessc -x styles.less styles.css;

done

为了获得更好的长期策略,您可能需要查看具有自己的监视模式的Grunt。

答案 1 :(得分:0)

您也可以安装watchcompile

https://npmjs.org/package/watch-compile

sudo npm install -g watch-compile

然后在你的less文件夹中

watchcompile -c

watchcompile -f Watchfile -i 300

如果有任何错误将其丢入控制台