Question

我在main.less文件中导入的文件少得多。现在我想用导入的文件制作一个main.min.less文件并压缩而没有任何注释。我用的是什么命令：

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

此命令压缩文件，但无法删除受限制的注释（/ *！comments * /）。请记住，我想制作另一个.less文件，而不是.css文件。有什么想法吗？

Answer 1

由于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

input-clean.less文件将被某种最小化，不再包含注释。

在评论中，@ seven-phases-max想知道缩小是否会减少客户端编译时间。那么客户端编译器通过XMLHttpRequest加载Less文件。减少字节数会加快加载速度。我不能说这是一个瓶颈。

当我使用Bootstrap的navbar.less文件尝试上述代码时，我发现：

8.0K    navbar-clean.less
16K navbar.less

通过压缩和没有注释，可以将较少的文件编译为较少的文件？

1 个答案: