2014-09-26 53 views
0

我有更少的文件導入到main.less文件中。現在我想用導入的文件製作一個main.min.less文件並壓縮並且沒有任何評論。我用什麼命令是:有可能通過壓縮和沒有評論的方式將較少的文件編譯爲較少的文件?

lessc main.less > main.min.less -x 

該命令壓縮文件,但不能刪除受限制的註釋(/ *!comments * /)。 請記住,我想製作另一個.less文件,而不是.css文件。任何想法?

+0

@DarshakShekhda:真的嗎?同一個問題的鏈接?你發佈了錯誤的鏈接嗎? – Harry 2014-09-26 11:16:54

+1

用於縮小使用['--clean-css'](http://lesscss.org/usage/#command-line-usage-clean-css)而不是'-x'。儘管**不能用lessc壓縮更少的內容(這是「Less Compiler」而不是「Minifier」)。 – 2014-09-26 11:26:37

+0

@ seven-phases-max你說得對。但我不需要一個縮小的css版本,因爲我想彌合較少的文件,性能。有沒有Less Minifier工具?我沒有咕嚕咕嚕地工作過,對它有幫助嗎? – bobsilon 2014-09-26 12:44:42

回答

0

由於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 pathnpm 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 
相關問題