ノードとnpmをインストールしました。 npmでは、ダウンロードする量が少なくなりました。
そして私がするとき
lessc styles.less styles.css -x -w
ターミナルでは、コードをコンパイルおよび圧縮しますが、ファイルの変更を監視しません。これは、LESSがページを自動的にコンパイルおよび更新することを期待しているためです。そのため、styles.lessに変更を加えた場合、毎回端末に移動してコマンドを入力し、less cssをコンパイルする必要があります。
また、コンパイラーはコンパイルエラーも表示しません。
上記を達成する方法を教えてください。これは、LESS CSSの最初の日です。
より簡単な方法があります。
NodeJsをインストールします。そして、NPM経由でless-monitorをインストールします
簡単に言えば、-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
2019 update:lessc
isまだ直接使用しているものですが、時々、 full webpack 最近のスタック。
遠くから見た場合のように魂を破壊するほどではありませんが、セットアップするのに時間がかかる(そして信頼する)ことができます。特に、これがshouldの仕組みについて先入観を持っている場合。
そして、はい、2019年夏までにwebpackは死んだプロジェクトになり、すべてのクライアント側のヒップスターは別のものに移るでしょう。それはここでのリスクです。良い点は、最終的にこれがレイヤー上に LESSやSASSやさまざまなスクリプト言語のようなものであり、すべてがクライアント側であることです。あなたが好きな限り、あなたは恐竜であり続けることができます。
less-watch-compiler を使用します。
グローバルにインストールする
$ (Sudo) npm install -g less-watch-compiler
メインファイルなしの使用法
$ less-watch-compiler FOLDER_TO_WATCH FOLDER_TO_OUTPUT
メインファイルの使用法
$ less-watch-compiler FOLDER_TO_WATCH FOLDER_TO_OUTPUT main.less