bem-site / bem-forum-content-ru

Content BEM forum for Russian speak users
MIT License
56 stars 6 forks source link

Мелочи из bem-components после сборки #376

Open uliantsev-a opened 9 years ago

uliantsev-a commented 9 years ago

Всем доброго времени суток. Пробую разбираться в строительстве готовых, сверстанных страниц, при помощи bem-tools. И привлек внимание небольшой нюанс в следующем блоке:

   block : 'select',
      mods : { mode : 'radio', theme : 'islands', size : 'l' },
      name : 'select1',
      val : 2,
      options : [
          { val : 1, text : 'Раз' },
          { val : 2, text : 'Два' },
          { val : 3, text : 'Три' }
      ]
    ...

Вот такой html получается:

<div class="select select_mode_radio select_theme_islands select_size_l i-bem select_js_inited" data-bem="{&quot;select&quot;:{&quot;name&quot;:&quot;select1&quot;}}">
    <input class="select__control" name="select1" value="2" type="hidden">
       <button class="button button_size_l button_theme_islands button__control select__button i-bem button_js_inited _popup-destructor_js_inited" data-bem="{&quot;button&quot;:{}}" role="button" type="button">
          <span class="button__text">Два</span>
          <i class="icon select__tick" aria-hidden="true"></i>
       </button>
</div>

Далее смотрю на стили элемента

.select_theme_islands .select__tick {
   background-image: url('../../libs/bem-components/design/common.blocks/theme/_islands/arrow.svg');
...
}

А перенесенная страница в другой каталог этот svg уже не нашла конечно.

Но это ведь в уже собранных файлах o_O .bem/make.js

process.env.YENV = 'production';

На этой странице использовался только один компонент, но если их несколько... В ручную копировать элементы компонентов, переписывать их url в стилях и т.п. Или есть какие-то проф хитрости которые предстоит изучить?

Хочется получить готовый index.html, _index.js, _index.css и отправить их дальше по конвейеру, отдельно от node-js и bem-tools. Помогите пожалуйста независимо подгрузить "пимпочка.svg" в select bem-core после сборки. --- Так же, косвенно есть второй вопрос, возможно его суть как-то повлияла на предыдущий результат. Каталог проекта я собирал с помощью утилиты yo bem-stub. Все движения при сборки повторял за Женей Константиновым, из видео по BEMup в Москве. Но след в след не вышло т.к. yo bem-stub предлагал небольшой список компонентов. bem-components я выбрал, но к примеру bem-core не было среди вариантов далее. И стреди технологий было совсем небольшое колличество, нежели в видео. Если точнее то это все технологии что предлагаются:

? Choose technologies to be used in the project: 
 ◯ BEMJSON
 ◯ ie.css
 ◯ ie8.css
 ◯ ie9.css
❯◯ BEMTREE
 ◯ node.js
 ◯ browser.js+bemhtml

а как же ie6? )) Или другие.

tadatuta commented 9 years ago

Ответ на первый вопрос кроется в использовании borschik. Если совсем коротко, то необходимо положить в корень проекта файл .borschik (начинается с точки) с описанием, как рерайтить пути к статике или же можно вообще инлайнить картинки прямо в CSS, чтобы избежать лишних http-запросов. Предлагаю вот такой вариант:

{
    "freeze_paths" : {
        "libs/**": ":base64:",
        "libs/**/*.svg": ":encodeURIComponent:",
        "*.blocks/**": ":base64:",
        "*.blocks/**/*.svg": ":encodeURIComponent:"
    }
}

Что касается второго вопроса, то с момента BEMup'а генератор был доработан. В частности при выборе bem-components нет необходимости спрашивать про bem-core, т.к. bem-components автоматически вытянут нужную версию bem-core по зависимостям в любом случае. Список технологий, если мне не изменяет память, можно прокручивать (под browser.js+bemhtml должны быть еще какие-то). Но ie6 там, конечно, нет ;)

uliantsev-a commented 9 years ago

@tadatuta, спасибо! Шикарное решение.

Я так и предположил, что генератор доработался и варианты немного поменялись. Да и прокручивать я пытался, разными вариантами PageDown, СтрелкаВНиз... больше нету.

А вот в BamUp-e есть ie6, ie7, ie8. Ну да ладно, обойдусь как ни будь =D

qfox commented 9 years ago

@Bumerang47 Все течет, все меняется ;-) Даешь ренессанс 2.0, пятилетку за 3 года ;-)

uliantsev-a commented 9 years ago

@tadatuta, прошу прощения, но не получается. Вероятно это был пример и для моего случая его необходимо как-то настроить? Создал файл, скопировал ваш вариант. В сборке base64 нет =(

Guria commented 9 years ago

Судя по расшареному проекту, ты как минимум имя файла неверное задал. .borschik и не указал в конфиге каталог img.

uliantsev-a commented 9 years ago

Ааа, чёрт возьми, прошу прощения. Переименовал, все стало хорошо. А я пару дней в раздумьях, почему не работает.