用命令行編譯Less源文件須要先安裝node.js,官方下載地址:http://nodejs.org/css
使用npm包管理工具安裝Less編譯器node
npm install less -g
參數-g 是安裝到所有環境中的指令,若是隻想安裝特定版本,可以使用以下命令npm
npm install less@1.6.2 -g
Less編譯器用法:bootstrap
Usage: lessc [option option=parameter ...] <source> [destination]
示例:安全
E:\Dev\Dev2015\less compile dir>lessc bootstrap.less bootstrap.css
這樣就會生產.css文件app
壓縮輸出文件大小less
lessc -x bootstrap.less bootstrap.css
經過使用-x參數,來壓縮輸出文件的大小,下面是壓縮先後的文件大小工具
-x 壓縮主要是刪除多餘空白實現的ui
lessc --help
或this
lessc -h
-M, --depends Outputs a makefile import dependency list to stdout.
--no-color Disables colorized output.
--no-ie-compat Disables IE compatibility checks.
--no-js Disables 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.
--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"
安裝插件
PS E:\Dev\Dev2015\less compile dir> npm install less-plugin-clean-css
less-plugin-clean-css@1.5.0 node_modules\less-plugin-clean-css
└── clean-css@3.1.2 (commander@2.6.0, source-map@0.1.43)
PS E:\Dev\Dev2015\less compile dir>
使用less-plugin-clean-css插件進行輸出壓縮
lessc --plugin=less-plugin-clean-css .\bootstrap.less bootstrap.css
-v, --version Prints version number and exit.
--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-less-inline Puts the less files into the map instead of referencing them. --source-map-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, --relative-urls Re-writes relative urls to the base less file. -sm=on|off Turns 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 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 ---------------- --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. --verbose Be verbose. -x, --compress Compresses output by removing some whitespaces. We recommend you use a dedicated minifer like less-plugin-clean-css