使用命令行編譯Less源文件

用命令行編譯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.

禁用IE兼容性檢查

--no-ie-compat           Disables IE compatibility checks.

禁用JavaScript

--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.

容許導入不安全的https主機

 --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
相關文章
相關標籤/搜索