在NodeJS中同步less编译
我正在尝试为Browserify编写一个转换脚本,允许我使用require()
.less文件。 转换将它们编译为CSS,然后将该缩小的CSS封装在一个将CSS附加到页面的小函数中。
我的麻烦是, 主LESS模块是asynchronous的,这似乎不是与转换脚本一起工作:
lessify / index.js (直接从node-underscorifybuild模)
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
库,所以也许它的行为可以很容易地调整为asynchronous函数? 我意识到less.render()
在处理@import
默认是asynchronous的,为了能够直接在我的页面上require()
LESS,不介意放弃导入。
如果稍作修改,这实际上是有效 我正在愚蠢的上面运行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); }); };