css - 可以通过压缩和不注释将 less 文件编译成 less 吗？

Question

我在 main.less 文件中导入了更多的 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);
}

然后让 clean-less 文件在您的系统上可执行 (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