tadatuta
commented
7 years ago Начну с истории про копирование в нужную структуру. Тут вариантов много и они все простые:
- Можно написать скрипт хоть на bash, который будет копировать нужные файлы
- Можно воспользоваться каким-то таск-раннером, вроде
gulpи сделать таску, которая будет запускатьenb makeв продакшен-режиме (для этого сборку нужно запускать с переменной окруженияYENV=production). При использовании через JS API запуск enb make возвращает промисс, на успешное выполнение которого можно копировать полученные файлы. - Сконфигурировать конфиг ENB, чтобы он сам занимался копированием файлов. Пример можно посмотреть здесь (все ссылки ведут на тот же файл, но на разные строки): https://github.com/bem/bem-express/blob/master/.enb/make.js#L4 https://github.com/bem/bem-express/blob/master/.enb/make.js#L95-L96 https://github.com/bem/bem-express/blob/master/.enb/make.js#L99
Что касается рерайта путей к картинкам, то правильного конфига borschik будет достаточно. Примеры:
- Инлайним все картинки, ничего копировать не придется: https://github.com/bem/bem-express/blob/master/.borschik
-
Картинки инлайним, шрифты копируем в папку
static, но в CSS рерайтим так, как будто папкаstaticраздается из корня сайта:{ "paths": { "./static/": "/" }, "freeze_paths": { "./node_modules/bem-font-awesome/fonts/*": "./static/fonts/", "./libs/**/*.woff": "./static/fonts/", "./libs/**/*.ttf": "./static/fonts/", "libs/**/*.svg": ":encodeURIComponent:", "libs/**": ":base64:", "./node_modules/**/*.svg": ":encodeURIComponent:", "./node_modules/**": ":base64:", "*.blocks/**/*.svg": ":encodeURIComponent:", "*.blocks/**": ":base64:" } }
Подробнее про конфигурацию borschik см. https://github.com/bem-site/bem-method/blob/bem-info-data/articles/borschik/borschik.ru.md#Минимизация-css-и-js
satanicman
Всем привет. Посмотрел я вебинар 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 добавил строку в скрипты
но если из консоли запускать то выдает ошибку . Если запустить так То выдает такую вот ошибку Хотя эта папка есть. Я решил что оно ищет эту папку, как не странно, в корне диска. Дописал вот так'./' + glob.sync('.bundles/')Начало выдавать такую вот ошибку Как я понял, просто функция buildTargets ожидает на вход параметр object а я его преобразовываю в string. Но тогда нужно вернуться на предыдущий шаг и понять почему выдает что "desktop.bundles/index" не существует.Вообще вопрос заключается в том, как вы передаете ту же верстку по БЭМ с использование project-stub в production. Повторюсь, самая большая проблема как по мне, это пути к картинкам, фиг с ним, файлы то можно и руками собрать, их там все по 3 на каждую страницу, но вот как быть с путями для меня вопрос. Может кто поможет настроить сборщик корректно?