NodeJS 中的同步少编译答案

【问题标题】：Synchronous less compiling in NodeJSNodeJS 中的同步少编译
【发布时间】：2013-11-13 23:26:39
【问题描述】：

我正在尝试为 Browserify 编写一个转换脚本，它允许我处理 require() .less 文件。转换会将它们编译为 CSS，然后将缩小的 CSS 包装在一个小 Javascript 函数中，该函数将 CSS 附加到页面。

我的问题是 main LESS module 是异步的，它似乎无法与转换脚本一起使用：

lessify/index.js（直接从node-underscorify建模）

var less = require('less');
var cleanCSS = require('clean-css');
var through = require('through');

module.exports = function(file) {
    if (!/\.css|\.less/.test(file)) {
        return through();
    }
    var buffer = "";

    return through(function(chunk) {
        return buffer += chunk.toString();
    }, function() {
        compiled = buffer;
        if (/\.less/.test(file)) {
            compiled = less.render(compiled, function(e, r) { return r; });
        }
        // rv comments
        compiled = compiled.replace(/\/\*.*?\*\//g, "");

        // minify. TO DO: Get less.js to do this for us
        var compiled = cleanCSS.process(buffer);

        compiled = "(function($) { $('head').append('<style type=\"text/css\">" + compiled.replace(/'/g, "\\'") + "</style>');}(window.jQuery));";
        this.queue(compiled);
        return this.queue(null);
    });
};

这适用于 .css 文件，但会中断 .less 文件，因为 compiled 未定义。

less.js 源中有几个 completed pull requests 与此相关，但似乎没有一个对我有用。

我对@987654328@ 库不是很熟悉，所以也许它的行为可以很容易地调整为异步函数？我意识到 less.render() 默认异步处理 @import 是有意义的，并且不介意放弃导入以便能够直接在我的页面上使用 require() LESS。

【问题讨论】：

标签： javascript node.js asynchronous less browserify

【解决方案1】：

如果稍微修改一下，这实际上可以工作。在buffer 上运行cleanCSS，而不是compiled，我在上面很愚蠢

var less = require('less');
var cleanCSS = require('clean-css');
var through = require('through');

var parser = new(less.Parser)({
    processImports: false
});

module.exports = function(file) {
    if (!/\.css|\.less/.test(file)) {
        return through();
    }
    var buffer = "";

    return through(function(chunk) {
        return buffer += chunk.toString();
    }, function() {
        var compiled;
        // CSS is LESS so no need to check extension
        parser.parse(buffer, function(e, r) { 
            compiled = r.toCSS();
        });

        // rv comments
        compiled = compiled.replace(/\/\*.*?\*\//g, "");

        var compiled = cleanCSS.process(compiled);

        compiled = "(function($) { $('head').append('<style type=\"text/css\">" + compiled.replace(/'/g, "\\'") + "</style>');}(window.jQuery));";
        this.queue(compiled);
        return this.queue(null);
    });
};

【讨论】：