我正在尝试为Browserify编写一个转换脚本,允许我使用require()
.less文件。转换将它们编译为CSS,然后将缩小的CSS包装在一个将CSS附加到页面的小Javascript函数中。
我的麻烦是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文件,但由于compiled
未定义,因此打破.less文件。
与此相关的less.js源中有多个completed pull requests,但似乎没有一个对我有效。
我对through
库并不十分熟悉,所以它的行为可以很容易地调整为异步函数吗?我意识到less.render()
默认情况下异步处理@import
是有意义的,并且不介意放弃导入以便能够在我的页面上直接require()
LESS。
答案 0 :(得分: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);
});
};