NodeJS中的同步较少编译

Question

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

我的麻烦是主LESS模块是异步的,它似乎不能与转换脚本一起使用:

lessify/index.js(直接从节点undercorify建模)

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文件,但是因为compiled未定义而打破.less文件.

在与此相关的less.js源中有几个已完成的 pull请求,但似乎没有一个对我有效.

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

Answer 1

如果稍微修改一下，这实际上是有效的。cleanCSS我在上面运行是愚蠢的buffer，而不是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);
    });
};