borschik / borschik Goto Github PK
View Code? Open in Web Editor NEWExtendable builder for text-based file formats
Home Page: http://bem.info/articles/borschik/
License: MIT License
Extendable builder for text-based file formats
Home Page: http://bem.info/articles/borschik/
License: MIT License
The DevTools support editing both styles and scripts live, without the need for a full page refresh. https://developers.google.com/chrome-developer-tools/docs/authoring-development-workflow#live-editing
For compiled/combined/minified resources DevTools can parse the Source Map and make it appear as though you're running unminified and uncombined files.
https://developers.google.com/chrome-developer-tools/docs/javascript-debugging?#source-maps
Add support for source maps to borschik, please.
During freezing
.icon-service-attraction-inactive{background:url(../img/sprites/services.png)}.icon-service-attraction-white-md{background:url(../img/sprites/services.png)}
borschik fails
Error: No such file or directory: /Volumes/Workspace/projects/datravel-website/application/public/freezing/public/img/sprites/services.png)}.icon-service-attraction-white-md{background:url(../img/sprites/services.png
-> /Volumes/Workspace/projects/datravel-website/application/public/freezing/public/css/common_bottom.min.css
at exports.Tech.base.Tech.inherit.File.exports.File.base.File.inherit.processLink [as __base] (/Volumes/Workspace/projects/datravel-website/application/node_modules/borschik/lib/techs/css-base.js:54:27)
at exports.Tech.base.Tech.inherit.File.exports.File.base.File.inherit.processLink (/Volumes/Workspace/projects/datravel-website/application/node_modules/borschik/lib/techs/css.js:104:68)
at null.processLink (/Volumes/Workspace/projects/datravel-website/application/node_modules/borschik/node_modules/inherit/lib/inherit.js:81:36)
at exports.Tech.INHERIT.File.exports.File.INHERIT.process (/Volumes/Workspace/projects/datravel-website/application/node_modules/borschik/lib/tech.js:138:54)
at exports.Tech.base.Tech.inherit.File.exports.File.base.File.inherit.processInclude (/Volumes/Workspace/projects/datravel-website/application/node_modules/borschik/lib/techs/css.js:97:61)
at exports.Tech.INHERIT.File.exports.File.INHERIT.process (/Volumes/Workspace/projects/datravel-website/application/node_modules/borschik/lib/tech.js:138:26)
at exports.Tech.INHERIT.process (/Volumes/Workspace/projects/datravel-website/application/node_modules/borschik/lib/tech.js:34:56)
at Cmd.<anonymous> (/Volumes/Workspace/projects/datravel-website/application/node_modules/borschik/lib/coa.js:137:38)
at /Volumes/Workspace/projects/datravel-website/application/node_modules/borschik/node_modules/coa/lib/cmd.js:483:22
at _fulfilled (/Volumes/Workspace/projects/datravel-website/application/node_modules/borschik/node_modules/coa/node_modules/q/q.js:798:54)
Note the file name:
services.png)}.icon-service-attraction-white-md{background:url(../img/sprites/services.png
All works well if I freeze the file with line breaks:
.icon-service-attraction-inactive {
background: url(../img/sprites/services.png)
}
.icon-service-attraction-white-md {
background: url(../img/sprites/services.png)
}
Привет!
Если в css используются обращения к svg фильтрам, то файл игнорируется, например:
div {
filter: url("filters.svg#blur");
}
Воспроизвести можно так:
клонировать репозиторий https://github.com/megatolya/bb
вызвать в нем sh reproduce.sh
в папке expectation см. файл app.css.
На борщик 1.0.х воспроизвести не смог, так как не понял, как в нем вызывать фриз путей.
Вот такой link файла
url: '/*borschik:link:../../data/fonts.css*/',
Дает в итоговом коде
url: '../../bla-bla/data/fonts.css*/',
То есть "закрываюшая" часть комментария остается. Начинает нормально работать, только если ее убрать использовать link вот так
url: '/*borschik:link:../../data/fonts.css',
Выглядит как-то странно :-)
Код
@import url('a/a1.css');
@import 'a/a2.css';
@import url(a/a2.css);
@import url(a/a3.css);
будет раскрыт так
/* a/a2.css begin */
background: url("a/a2.png");
/* a/a2.css end */
/* a/a2.css begin */
background: url("a/a2.png");
/* a/a2.css end */
А должно быть так
/* a/a2.css begin */
background: url("a/a2.png");
/* a/a2.css end */
I want to use include
and safe js validity in this example
var data = /* borschik:include:data.json */;
My proposal
var data = "borschik:import:data.json";
<!DOCTYPE HTML>
<html>
<head>
<link rel="shortcut icon" href="/favicon.ico"/>
</head>
<body>
123
</body>
</html>
замораживаем командой
borschik -t html -i index.html -o project/index.html
получаем
<!DOCTYPE HTML>
<html>
<head>
<link rel="shortcut icon" href="../../../../favicon.ico"/>
</head>
<body>
123
</body>
</html>
пусть к favicon.ico сильно изменился, хотя, по идеи, вообще не должен был меняться.
Хотелось бы использовать .borschik не как файлик, а json в виде параметра для api. Дело в том, что для разработки используется один конфиг, а для сборки другой. Делать симлинки как сейчас мне кажется не правильным решением. Что скажете?
may be like this
require('borschik')
.api({
'inputString': '......',
'outputPath': 'builded_files/' // to deal with relative urls
}).
.then(function( resultString ){
})
Хотел сделать так, чтобы специально поименованные картинки инлайнились в css, т.е. имея такой css:
.block{
background: url('pic.svg?inline');
}
.inlinesvg_no .block{
background: url('pic.png');
}
хочу получить такое:
.block{
background: url('data:image/svg+xml;....');
}
.inlinesvg_no .block{
background: url('/freeze/SoMeFREEzeNaME.png');
}
Написал такой конфиг:
"freeze_paths" : {
"./**?inline": ":encodeURIComponent:",
"./**": "./freeze/"
}
Однако т.к. freeze_path матчится с помощью minimatch, первое правило никогда не будет работать.
Т.е. единственная возможность сейчас инлайнить картинки борщиком - это переложить нужные в отдельную директорию, но это не удобно и вообще не по БЭМ.
There is no error handling for css technology. This leads to idiotic error
15:09:11.528 - [failed] [desktop.bundles/product-articles/_product-articles.css] borschik
15:09:11.528 - build failed
undefined
Добрый день!
Не подскажите, как делать минификацию файлов, подключаемых через borschik:include
?
Hi, guys!
Could you tell me, how to minificate borschik:include
include files?
csso - 1.3.8
inherit - 2.1.0
uglify-js - 2.4.0
Как вообще это отслеживать. Вот к примеру коммит (f3c462d) исправлений, но в npm по прежнему версия без этих правок.
Хелп, просвятите!
Ветки fixpack, options и minimize давно в мастере, но до сих пор захламляют список веток.
Файловая стуктура
.borschik
hubs/
css/ ---(symlink)--> ../static/css/
static/
blocks/
include.css
css/
test.css
test.css
@import "../blocks/include.css"
.borschik
{
"follow_symlinks": {
".": true
}
}
запускам из корня
borschik -i hubs/css/test.css
и получаем ошибку ENOENT, no such file or directory hubs/blocks/include.css
Но, согласно конфигу, borschik должен преобразовать hubs/css/test.css
в настоящий файл static/css/test.css
и работать с ним
при переходе с 0.3.4 на 0.3.5 перестал работать freez
Error: EPERM, operation not permitted C:\
For example
.borschik
config. There is no path-mapping, so we need to declare path and maybe wildcard for inlined files (max size?)
{
"inline_base64": {
"static/icon": "*.svg"
}
}
Input CSS
.a {
background: url('static/icon/ico.svg')
}
Ouput CSS
.a {
background: url(data:image/svg+xml;base64,...)
}
csso - 1.3.8
inherit - 2.1.0
uglify-js - 2.4.0
Also remove commented code from #97
Переложить borschik-tech-coffee
из alexeyten/borschik-tech-coffee в bem/borschik-tech-coffee
Видимо нужно обновить библиотеку Q.
valueOf is deprecated, use inspect instead. Error
at Promise.valueOf (/folder/node_modules/borschik/node_modules/coa/node_modules/q/q.js:452:39)
at Object.vow.valueOf (/folder/node_modules/vow/lib/vow.js:773:58)
at /folder/node_modules/vow/lib/vow.js:937:44
at _fulfilled (/folder/node_modules/borschik/node_modules/coa/node_modules/q/q.js:798:54)
at self.promiseDispatch.done (/folder/node_modules/borschik/node_modules/coa/node_modules/q/q.js:827:30)
at Promise.promise.promiseDispatch (/folder/node_modules/borschik/node_modules/coa/node_modules/q/q.js:760:13)
at /folder/node_modules/borschik/node_modules/coa/node_modules/q/q.js:574:44
at flush (/folder/node_modules/borschik/node_modules/coa/node_modules/q/q.js:108:17)
at process._tickCallback (node.js:415:13)
I can use relative paths for directories to generate freeze maps
$ node_modules/.bin/borschik freeze path/to/directory
and it works, but when I try do it for specified file borschik falls
$ node_modules/.bin/borschik freeze --input=path/to/file.js
Error
at exports.freeze (/Volumes/Workspace/projects/datravel-website/application/node_modules/borschik/lib/freeze.js:96:52)
at freezeAllProcessFile (/Volumes/Workspace/projects/datravel-website/application/node_modules/borschik/lib/freeze.js:232:15)
at Object.exports.freezeAll (/Volumes/Workspace/projects/datravel-website/application/node_modules/borschik/lib/freeze.js:213:9)
at Cmd.module.exports.require.Cmd.name.title.helpful.opt.name.title.short.long.flag.only.act.end.opt.name.title.short.long.end.opt.name.title.short.long.def.val.end.opt.name.title.short.long.act.end.opt.name.title.act.end.opt.name.title.end.opt.name.title.short.long.output.req.end.opt.name.title.short.long.def.val.end.opt.name.title.short.long.def.val.end.opt.name.title.short.long.def.val.end.opt.name.title.long.def.val.end.cmd.name.title.helpful.opt.name.title.short.long.def.end.opt.name.title.short.long.output.end.opt.name.title.short.long.def.val.end.act.end.act.tech (/Volumes/Workspace/projects/datravel-website/application/node_modules/borschik/lib/coa.js:121:46)
at /Volumes/Workspace/projects/datravel-website/application/node_modules/borschik/node_modules/coa/lib/cmd.js:483:22
at _fulfilled (/Volumes/Workspace/projects/datravel-website/application/node_modules/borschik/node_modules/coa/node_modules/q/q.js:798:54)
at self.promiseDispatch.done (/Volumes/Workspace/projects/datravel-website/application/node_modules/borschik/node_modules/coa/node_modules/q/q.js:827:30)
at Promise.promise.promiseDispatch (/Volumes/Workspace/projects/datravel-website/application/node_modules/borschik/node_modules/coa/node_modules/q/q.js:760:13)
at /Volumes/Workspace/projects/datravel-website/application/node_modules/borschik/node_modules/coa/node_modules/q/q.js:574:44
at flush (/Volumes/Workspace/projects/datravel-website/application/node_modules/borschik/node_modules/coa/node_modules/q/q.js:108:17)
Note, that it just say Error
without any description. If I change relative path to absolute, everything becames ok.
MIT
Вместо
.def(false)
.val(function(v) {
return U.stringToBoolean(v, false);
})
Можно просто писать .flag()
На windows не работает path mapping из-за неверного RegExp в resolveUrl2
https://github.com/bem/borschik/blob/master/lib/techs/css.js#L10
Должно быть
importRe = '(?:\\@import\\s+(' + urlRe + '|' + stringRe + ');?)',
Thats it.
@import url(//fonts.googleapis.com/css?family=Roboto:400,300,500,700&subset=latin,cyrillic);
in your code and borschik can't eat it. Have not found any workaround in docs.
Error: ENOENT, no such file or directory '/fonts.googleapis.com/cssfamily=Roboto:400,300,500,700&subset=latin,cyrillic'
at Object.fs.openSync (fs.js:439:18)
at Object.fs.readFileSync (fs.js:290:15)
at exports.Tech.INHERIT.File.exports.File.INHERIT.read (/Volumes/Workspace/projects/datravel-website/application/node_modules/borschik/lib/tech.js:115:46)
at exports.Tech.INHERIT.createFile (/Volumes/Workspace/projects/datravel-website/application/node_modules/borschik/lib/tech.js:26:41)
at exports.Tech.INHERIT.File.exports.File.INHERIT.child (/Volumes/Workspace/projects/datravel-website/application/node_modules/borschik/lib/tech.js:152:68)
at exports.Tech.base.Tech.inherit.File.exports.File.base.File.inherit.processInclude (/Volumes/Workspace/projects/datravel-website/application/node_modules/borschik/lib/techs/css.js:91:30)
at exports.Tech.INHERIT.File.exports.File.INHERIT.process (/Volumes/Workspace/projects/datravel-website/application/node_modules/borschik/lib/tech.js:138:26)
at exports.Tech.INHERIT.process (/Volumes/Workspace/projects/datravel-website/application/node_modules/borschik/lib/tech.js:34:56)
at Cmd.<anonymous> (/Volumes/Workspace/projects/datravel-website/application/node_modules/borschik/lib/coa.js:137:38)
at /Volumes/Workspace/projects/datravel-website/application/node_modules/borschik/node_modules/coa/lib/cmd.js:483:22
Need for right work YModules and CommonJS
b-promo-gallery__slide.ie.css
Before:
.b-promo-gallery__image
{
filter: expression('progid:DXImageTransform.Microsoft.AlphaImageLoader(' +
'src=' + style.backgroundImage.replace('url(', '').replace(')', '') +
', sizingMethod="scale")');
}
After:
Fatal Errors in IE and
.b-promo-gallery__image
{
filter: expression('progid:DXImageTransform.Microsoft.AlphaImageLoader(' +
'src='/blocks-desktop/b-promo-gallery/__slide/ +
style.backgroundImage.replace('url(', '').replace(')', '') +
', sizingMethod="scale")');
}
Solution:
.b-promo-gallery__image
{
filter: expression('progid:DXImageTransform.Microsoft.AlphaImageLoader(' +
's' + 'rc=' + style.backgroundImage.replace('ur' + 'l(', '').replace(')', '') +
', sizingMethod="scale")');
}
Наткнулся на запись вида:
MyClass('ClassName', {/*borschik:include:file.js*/});
в версии 0.3 - это не работает. Работает в версии 0.4.
Сейчас в ветке rc-0.4 это поведение описано, но
мне кажется это излишне и вводит в замешательство(очень не очевидно в силу своей странности).
{/*borschik:include:file.js*/}
и [/*borschik:include:file.js*/]
просто заменить на запись вида:
MyClass('ClassName', "borschik:include:file.js");
MyClass('ClassName', ["borschik:include:file.js"]);
Example from #9
{
"freeze_paths": {
"static/icon/**/*.png": ":base64:",
"static/icon/**/*.svg": ":encodeURIComponent:"
}
}
Привет!
Было бы круто добавить поддержку указания лимита размера файлов, для которых применять resource inlining.
Например, нужно инлайнить с base64-кодированием картинки размером до 4kB, а больше — фризить в папку:
"freeze_paths" : {
"i/png_images/**": ":base64:4096",
"i/png_images/**": "i/_/"
}
или
"freeze_paths" : {
"i/png_images/**": { "path": ":base64:", "limit": 4096 },
"i/png_images/**": "i/_/"
}
Кажется, что борщик сильно перегружен функционалом. Это
Как минимум, кажется, что технологиям Борщика не нужно ничего знать о минификации результата, а только заниматься раскрытием инклудов.
Например, нужно написать технологию раскрытия инклудов для CSS-препроцессора (путь будет roole). Результирующий файл, нужно пропустить через autoprefixer. Зафризить и потом сжать.
Запихивать весь этот функционал в технологии не всегда целесообразно и сложно (тем более если хочется реиспользовать код в других технологиях).
В идеале флоу должен быть такой*:
› borschik -i file.roo -t roole \
| autoprefixer \
| borschik-freeze -t css \
| csso > _file.css
stdin/stdout
; функции фриза вынесены в отдельный npm-модуль.<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="https://yandex.st/some.js"></script>
</head>
<body>
</body>
</html>
Now isurl(@process)
in less
results with isurl("../../common.blocks/some-block/@process)
which isn't expected.
See bem-archive/bem-tools#571 for details.
Это бы очень помогло для bem-archive/bem-tools#352
Как воспроизвести:
bash:
mkdir -p project/build
echo '{"freeze_paths": {"./**": "_/"}}' > project/build/.borschik
cp project/build/.borschik project/
cd project/
npm i borschik
node
Терминал ноды внутри директории project
:
var b = require('borschik');
var actualFreezeDir = b.freeze.freezeDir(path.resolve('build/test.js'));
var expectedFreezeDir = path.resolve('build/_');
assert.strictEqual(actualFreezeDir, expectedFreezeDir); // error
Итого:
project/
.borschik
build/
.borschik
Файлы .borschik
одинаковые. Если зафризить файл внутри project/build
то он как будто смотрит на родительский конфиг и фризит не туда.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.