Пишу скрипт, который затем вставляется в код произвольного сайта. Чтобы код для вставки был небольшой (по сути пара тегов script), то необходимо все внедряемые скрипты и css были собраны в один файл и при загрузке добавлены в DOM страницы.
Сейчас у меня скрипт содержит что-то типа
var sheet = (function () {
var style = document.createElement("style");
style.appendChild(document.createTextNode(""));
document.head.appendChild(style);
return style.sheet;
})();
var cssBaseRules = [
['#component {',
'position: fixed !important;',
'top: ' + options.top + ' !important;',
'}'].join(" "),
];
cssBaseRules.map(function (rule) {
sheet.insertRule(rule, 0);
});
Т.е. css добавлен в скрипт в виде массива свойств. А хочется чтобы разрабатывать было удобно как обычно css по файлам отдельно, js по файлам отдельно, а потом бац командой собрал в один js файл, который сам добавит css при загрузке.
Интересует, может есть какой boilerplate для такого рода задач? Best practices? Или традиционно gulp-grunt запилить?
