我有更少的文件導入到main.less文件中。現在我想用導入的文件製作一個main.min.less文件並壓縮並且沒有任何評論。我用什麼命令是:有可能通過壓縮和沒有評論的方式將較少的文件編譯爲較少的文件?
lessc main.less > main.min.less -x
該命令壓縮文件,但不能刪除受限制的註釋(/ *!comments * /)。 請記住,我想製作另一個.less文件,而不是.css文件。任何想法?
我有更少的文件導入到main.less文件中。現在我想用導入的文件製作一個main.min.less文件並壓縮並且沒有任何評論。我用什麼命令是:有可能通過壓縮和沒有評論的方式將較少的文件編譯爲較少的文件?
lessc main.less > main.min.less -x
該命令壓縮文件,但不能刪除受限制的註釋(/ *!comments * /)。 請記住,我想製作另一個.less文件,而不是.css文件。任何想法?
由於Less代碼與CSS代碼非常相似,因此您應該能夠(重新)使用許多方法,例如clean-css。
創建一個名爲clean-less
文件和下面的內容寫下來到它:
#!/usr/bin/env node
var path = require('path'),
CommentsProcessor = require('clean-css/lib/text/comments'),
fs = require('fs');
var args = process.argv.slice(1);
var input = args[1];
if (input && input != '-') {
input = path.resolve(process.cwd(), input);
}
var parseFile = function (e, data) {
var lineBreak = process.platform == 'win32' ? '\r\n' : '\n';
var commentsProcessor = new CommentsProcessor(0,false,lineBreak);
//single line comments
var regex = /\/\/ .*/;
data = data.replace(/\/{2,}.*/g,"");
/*
methods from clean css, see https://github.com/jakubpawlowicz/clean-css/
*/
var replace = function() {
if (typeof arguments[0] == 'function')
arguments[0]();
else
data = data.replace.apply(data, arguments);
};
//multi line comments
replace(function escapeComments() {
data = commentsProcessor.escape(data);
});
// whitespace inside attribute selectors brackets
replace(/\[([^\]]+)\]/g, function(match) {
return match.replace(/\s/g, '');
});
// line breaks
replace(/[\r]?\n/g, ' ');
// multiple whitespace
replace(/[\t ]+/g, ' ');
// multiple semicolons (with optional whitespace)
replace(/;[ ]?;+/g, ';');
// multiple line breaks to one
replace(/ (?:\r\n|\n)/g, lineBreak);
replace(/(?:\r\n|\n)+/g, lineBreak);
// remove spaces around selectors
replace(/ ([+~>]) /g, '$1');
// remove extra spaces inside content
replace(/([!\(\{\}:;=,\n]) /g, '$1');
replace(/ ([!\)\{\};=,\n])/g, '$1');
replace(/(?:\r\n|\n)\}/g, '}');
replace(/([\{;,])(?:\r\n|\n)/g, '$1');
replace(/ :([^\{\};]+)([;}])/g, ':$1$2');
process.stdout.write(data);
}
if (input != '-') {
fs.readFile(input, 'utf8', parseFile);
}
不是讓清潔無可執行文件系統(chmod +x clean-css
)上。 您應該也可以運行npm install path
和npm install css
。之後,你應該能夠運行:
./cleanless input.less > input-clean.less
的輸入clean.less文件將是某種形式的最小化,不含任何更多的評論。
在註釋@ seven-phases-max奇蹟中,如果縮小會減少客戶端編譯時間。那麼客戶端編譯器通過XMLHttpRequest加載Less文件。減少字節數將使加載更快。我不能說這是一個瓶頸問題。
當我嘗試從引導的navbar.less文件,我發現上面的代碼:
8.0K navbar-clean.less
16K navbar.less
@DarshakShekhda:真的嗎?同一個問題的鏈接?你發佈了錯誤的鏈接嗎? – Harry 2014-09-26 11:16:54
用於縮小使用['--clean-css'](http://lesscss.org/usage/#command-line-usage-clean-css)而不是'-x'。儘管**不能用lessc壓縮更少的內容(這是「Less Compiler」而不是「Minifier」)。 – 2014-09-26 11:26:37
@ seven-phases-max你說得對。但我不需要一個縮小的css版本,因爲我想彌合較少的文件,性能。有沒有Less Minifier工具?我沒有咕嚕咕嚕地工作過,對它有幫助嗎? – bobsilon 2014-09-26 12:44:42