Опитвам се да напиша трансформиращ скрипт за Browserify, който ми позволява да require()
.less файлове. Трансформацията ще ги компилира в CSS и след това ще обвие минимизирания CSS в малка Javascript функция, която добавя CSS към страницата.
Проблемът ми е, че главният модул LESS е асинхронен, което изглежда не работи заедно с трансформация скрипт:
lessify/index.js (Моделиран директно от възел -подчертайте)
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, свързани с това, но никой не изглежда да работи за мен.
Не съм много запознат с библиотеката through
, така че може би нейното поведение може лесно да се коригира към асинхронни функции? Осъзнавам, че има смисъл less.render()
да бъде асинхронен по подразбиране, за да обработва @import
, и нямам нищо против да се откажа от импортирането, за да мога директно да require()
ПО-МАЛКО на моите страници.