CSS/LESS/Node.js でコンパイルする

CSS/LESS/Node.js でコンパイルする

つまりサーバサイドでコンパイルする

Node.js はなんらかの方法でインストールされてる前提

インストール

$ npm install --save-dev less

確認

$ npx lessc --version
lessc 3.8.1 (Less Compiler) [JavaScript]

CSS の圧縮ツールも入れる

$ npm install less-plugin-clean-css

less のコンパイラに自動ベンダープレフィックス付与機能は無いので実用的にはこれもいれておく

$ npm install less-plugin-autoprefix

基本

$ npx lessc hogehoge.less hogehoge.css

圧縮込み

$ npx lessc --clean-css="-s1" hogehoge.less hogehoge.css

ベンダープレフィックス付与込み

$ npx lessc --clean-css="-s1" --autoprefix="defaults" hogehoge.less hogehoge.css

この defaults というのはその時の状況に合わせてうまくやってくれるというやつ。

ディレクトリまるごとコンパイルする

hoge/piyo/less ディレクトリ以下の less ファイルを、その配下のディレクトリ構造を保ったままで aaa/bbb/ccc/ddd/css ディレクトリ以下にコンパイルして出力する

for lessfile in $(find ./hoge/piyo/less -name "*.less"); do 
    cssfile=$(echo $lessfile | sed 's/hoge\/piyo\/less\/\(.*\)\.less$/aaa\/bbb\/ccc\/ddd\/css\/\1.css/i')
    echo "$lessfile to $cssfile";
    rm -f $cssfile;
    npx lessc $lessfile $cssfile;
done;

memo

man

options:
  -h, --help                   Prints help (this message) and exit.
  --include-path=PATHS         Sets include paths. Separated by `:'. `;' also supported on windows.
  -M, --depends                Outputs a makefile import dependency list to stdout.
  --no-color                   Disables colorized output.
  --ie-compat                  Enables IE8 compatibility checks.
  --js                         Enables inline JavaScript in less files
  -l, --lint                   Syntax check only (lint).
  -s, --silent                 Suppresses output of error messages.
  --strict-imports             Forces evaluation of imports.
  --insecure                   Allows imports from insecure https hosts.
  -v, --version                Prints version number and exit.
  --verbose                    Be verbose.
  --source-map[=FILENAME]      Outputs a v3 sourcemap to the filename (or output filename.map).
  --source-map-rootpath=X      Adds this path onto the sourcemap filename and less file paths.
  --source-map-basepath=X      Sets sourcemap base path, defaults to current working directory.
  --source-map-include-source  Puts the less files into the map instead of referencing them.
  --source-map-inline          Puts the map (and any less files) as a base64 data uri into the output css file.
  --source-map-url=URL         Sets a custom URL to map file, for sourceMappingURL comment
                               in generated CSS file.
  -rp, --rootpath=URL          Sets rootpath for url rewriting in relative imports and urls
                               Works with or without the relative-urls option.
  -ru=, --rewrite-urls=        Rewrites URLs to make them relative to the base less file.
    all|local|off              'all' rewrites all URLs, 'local' just those starting with a '.'

  -m=, --math=
     always                    Less will eagerly perform math operations always.
     parens-division           Math performed except for division (/) operator
     parens | strict           Math only performed inside parentheses
     strict-legacy             Parens required in very strict terms (legacy --strict-math)

  -su=on|off                   Allows mixed units, e.g. 1px+1em or 1px*1px which have units
  --strict-units=on|off        that cannot be represented.
  --global-var='VAR=VALUE'     Defines a variable that can be referenced by the file.
  --modify-var='VAR=VALUE'     Modifies a variable already declared in the file.
  --url-args='QUERYSTRING'     Adds params into url tokens (e.g. 42, cb=42 or 'a=1&b=2')
  --plugin=PLUGIN=OPTIONS      Loads a plugin. You can also omit the --plugin= if the plugin begins
                               less-plugin. E.g. the clean css plugin is called less-plugin-clean-css
                               once installed (npm install less-plugin-clean-css), use either with
                               --plugin=less-plugin-clean-css or just --clean-css
                               specify options afterwards e.g. --plugin=less-plugin-clean-css="advanced"
                               or --clean-css="advanced"

-------------------------- Deprecated ----------------
  -sm=on|off               Legacy parens-only math. Use --math
  --strict-math=on|off     

  --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.
  -x, --compress           Compresses output by removing some whitespaces.
                           We recommend you use a dedicated minifer like less-plugin-clean-css
css/preproc/less/compile_with_node.txt · 最終更新: 2020-04-10 17:25 by ore