Всем привет. Посмотрел я вебинар 2х годичной давности https://www.youtube.com/watch?v=1GWoMnYldYc про БЭМ. Сильно заинтересовался я этой методологией. Решил сделать тестовый проект на полном бем стеке. Склонировал себе project-stub и начал делать, все замечательно не без подводных камней конечно но закончил я верстку. И пришло время собирать все в production, и вот тут то и засада. В том вебинаре был специальный таск для enb который собирал все основные файлы в отдельную папку, собирал туда все картинки и что самое главное переписывал все пути к картинкам относительно их нового расположения и нового имени. Я создал конфиг файл для борьщика, он мне все картинки собрал то, попробовал скопировать таск с этого вебинара и вставить к себе, но понятное дело это просто так не работает. Вот сам таск:
var fse = require('fs-extra'),
path = require('path'),
glob = require('glob'),
rootDir = path.join(__dirname, '..');
config.task('dist', function (task) {
// build targets and copy it to 'dist' folder
function copyTargets(buildInfo) {
buildInfo.builtTargets.forEach(function (target) {
var src = path.join(rootDir, target),
dst = path.join(rootDir, 'dist', path.basename(target));
fse.copySync(src, dst);
});
}
return task.buildTargets(glob.sync('*.bundles/*'))
.then(function (buildInfo) {
copyTargets(buildInfo);
task.log('Dist was created.');
});
});
В package.json добавил строку в скрипты "dist": "YENV=production enb make dist -n"но если из консоли запускать
npm run distто выдает ошибку
"Exit status 1 Failed at the bem-project-stub@2.0.0 dist script 'YENV=production enb make dist -n'.". Если запустить так
./node_modules/.bin/enb make distТо выдает такую вот ошибку
Target not found: desktop.bundles/indexХотя эта папка есть. Я решил что оно ищет эту папку, как не странно, в корне диска. Дописал вот так
'./' + glob.sync('.bundles/') Начало выдавать такую вот ошибку targets.forEach is not a functionКак я понял, просто функция buildTargets ожидает на вход параметр object а я его преобразовываю в string. Но тогда нужно вернуться на предыдущий шаг и понять почему выдает что "desktop.bundles/index" не существует.
Вообще вопрос заключается в том, как вы передаете ту же верстку по БЭМ с использование project-stub в production. Повторюсь, самая большая проблема как по мне, это пути к картинкам, фиг с ним, файлы то можно и руками собрать, их там все по 3 на каждую страницу, но вот как быть с путями для меня вопрос. Может кто поможет настроить сборщик корректно?
Начну с истории про копирование в нужную структуру. Тут вариантов много и они все простые:
gulpи сделать таску, которая будет запускатьenb makeв продакшен-режиме (для этого сборку нужно запускать с переменной окруженияYENV=production). При использовании через JS API запуск enb make возвращает промисс, на успешное выполнение которого можно копировать полученные файлы.Что касается рерайта путей к картинкам, то правильного конфига
borschikбудет достаточно. Примеры:Картинки инлайним, шрифты копируем в папку
static, но в CSS рерайтим так, как будто папкаstaticраздается из корня сайта:Подробнее про конфигурацию
borschikсм. https://github.com/bem-site/bem-method/blob/bem-info-data/articles/borschik/borschik.ru.md#Минимизация-css-и-js@tadatuta Дак вот по поводу копирования в нужную структуру собственно и вопрос.
var fse = require('fs-extra'), path = require('path'), glob = require('glob'), rootDir = path.join(__dirname, '..'); config.task('dist', function (task) { // build targets and copy it to 'dist' folder function copyTargets(buildInfo) { buildInfo.builtTargets.forEach(function (target) { var src = path.join(rootDir, target), dst = path.join(rootDir, 'dist', path.basename(target)); fse.copySync(src, dst); }); } return task.buildTargets(glob.sync('*.bundles/*')) .then(function (buildInfo) { copyTargets(buildInfo); task.log('Dist was created.'); }); });Насколько я понимаю суть этого таска не замысловата, он просто запускает билд проекта и после его выполнения проходится по всем папкам и собирает с них файлы в папку 'dist' Только вопрос, почему он выдает ошибку
Если на самом деле данный каталог существует? А по поводу борьщика я обязательно почитаю. И сразу по нему вопрос, с чем может быть связан тот факт что когда я в конфиге борьщика указываю папку назначения ту которая не существует то он выдает мне ошибку типа . И вопрос номер 2, если фиг с ним создать руками папку назначения для борьщика и запустить enb make то почему то в корне появляется папка с полным путем относительно корня диска. Т.е. что я имею ввиду, допустим я меня проект лежит по такому пути "d:/Projects/project/bem/", то после сборки у меня в корне проекта появится папка "Projects/project/bem/build/img/" и вот эта папка "buld/img/" - это та папка которую я указываю в борьщике?Сделал буквально сделующее:
.enb/make.jsприведенный код с таской 3.По
borschikнужно искать проблему в конфиге. Не должно быть ни полных путей, ни ошибок при отсутствии необходимой папки.Если не получится разобраться, можно опубликовать здесь ссылку на репозиторий, я попробую помочь.
@tadatuta А можно узнать какой ОС вы пользуетесь. У меня стоит windows 10 и в ней выдает что Error: Target not found: desktop.bundles/index Даже на чистом project-stub. Я просто думаю что это может как-то с настройками ОС связанно или зависит от платформы. И еще на чтостом project-stub у меня почему то не подхватываются стили блоков и борьщик не собират изображения по указанному пути. Вот репозиторий https://github.com/satanicman/bem-test
По всей видимости дело действительно в ОС, т.к. в этом репо у меня тоже все в порядке:
и в результате выполнения в папке
imgпоявляетсяGD8S4K7cgL0W7ttsvzQxsO3YCb0.png.Предлагаю попробовать поставить git bash и запускать сборку в нем, есть шанс, что поможет.
@tadatuta Да я и так из баша все запускал. Пробовал и из cmd консоли, результат тот же. Завтра еще на работе попробую, правда там тоже винда, но мало ли.
@tadatuta На работе та же фигня. Видимо все таки это именно то ОС зависит. Буду пробовать подымать виртуалку с Linux и там еще тестить.
Есть пара вот таких PR, связанных с windows, может быть они исправляются проблему? https://github.com/borschik/borschik/pull/130 https://github.com/borschik/borschik/pull/89
@tadatuta Вся беда в ОС. На linux все собирается корректно.
@tadatuta
Этот вариант помог с тем что борьщик не создавал папку.
config.task('dist', function (task) { var dirs = new Object(); // build targets and copy it to 'dist' folder function copyTargets(buildInfo) { buildInfo.builtTargets.forEach(function (target) { var src = path.join(rootDir, target), dst = path.join(rootDir, 'dist', path.basename(target)); fse.copySync(src, dst); }); } for (var line in glob.sync('*.bundles/*')) { dirs[line] = './' + glob.sync('*.bundles/*')[line] } return task.buildTargets(dirs) .then(function (buildInfo) { copyTargets(buildInfo); task.log('Dist was created.'); }); });А вот этот КОСТЫЛИЩЕ помог с
cc @blond