Предыстория

По просьбам желающих выкидываю свой опыт внедрений gulp сборки в свой проект. До этого была связка gulp + enb. Всё работало, но как-то через костыли. Особенно с browserify (в блоках была технология .source.js, которая gulp'ом трансформировалась в .browser.source.js, а потом собиралась enb). Но вот я наткнулся на то, что gulp сборка уже есть в project-stub(bem-starter-kit //cc @tadatuta) и решил что пора перенастроить сборку проекта :)

На адаптацию gulp сборки под мой проект у меня ушёл вечер. Всё стало круто. Я избавился от кучи костылей, в частности связанных с синхронизацией перезагрузки сервера и browserify, с наличием 2 систем сборки в проекте.

Минусы

Что мне не понравилось, так это скорость сборки... К моему сожалению она уступает сборке с ENB пример в ~1.5-2 раза, но это только первые шаги gulp-bem ;) Дальше всё будет шустро. Не оказалось обёрток над BEMTREE и BEMHTML для YM из-коробки (но эта проблема оказалась легко решаема). Также наткнулся на баг(не кретичный), но его скоро профиксят.

Плюсы

• одна система сборки
• удобство внедрения
• куча gulp плагинов в сети
• pipe
• более низкий порог вхождения, чем ENB
• лёгкость подключения sourcemaps

Оптимизации/Ускорение/Рекомендации

Всё началось с того что мой gulpfile стал выглядеть так. Меня очень напрягают длинные файлы с кодом и я задумался над оптимизацией процесса сборки.

Шаг 1. Пресеты

Я прям очень рад от идеи пресетов. Изначально я просто разбил модули по каталогам в своём проекте, чтобы не раздувать gulpfile. И подключал их... Но потом мне пришла идея, что это то, что нужно! Пресеты стали развитием моей идеи о стандартных конфигах для gulp сборки. Их основная идея в том, чтобы можно было с лёгкостью переносить конфиги из проекта в проект, без лишнего заграмаждения кодом. А также можно делиться своими пресетами ;) Так стал выглядеть мой gulpfile.

Свои наборы выложил на GitHub.

• gulp-bem-preset-css
• gulp-bem-preset-browserjs (с поддержкой browserify)
• gulp-bem-preset-bemhtml (с поддержкой обёртки YM)
• gulp-bem-preset-bemtree (с поддержкой обёртки YM)

Шаг 2. Кэш

Меня стала очень сильно напрягать скорость пересборки проекта... ~7-8 секунд очень медлено. Но плагины gulp-cached и gulp-remember немного решили мою проблему. Скорость сборки увеличилась и стала занимать ~3-4 секунды (есть в пресетах browserjs и css начиная с версии 0.1.0).

Шаг 3. Разбивка бандла на таски.

Меня стало напрягать то, что при сохранении стилей пересобиравется весь bundle! И стили, и JS, и шаблоны... Пустая трата моего времени и реусурсов ноута. Разбил всё на несколько тасков и пересобираю только нужные части бандла. В результате скорость пресборки бандла увеличилась ещё больше и теперь занимает ~1.2сек, что уже становится весьма приемлемо. Текущий gulpfile также выложил на gist таким, какой он есть сейчас (не приглаживал).

Рекомендации по стилям

Не использовать глобальные переменные через блоки. Чтобы всё работало нормально нужно сконкатить все файлы, а потом только прогонять через процессоры... Это отрицительно сказывается на скорости сборки. Лучше в стилях явно использовать импорты. Тогда кэшировать можно каждый блок по отдельности + понятно откуда те или иные переменные (у меня на данный момент не так, из-за чего страдаю)

Пробуйте gulp-bem, он классный :)

Проект на базе project-stub. Используются:

1. bem-core v 3.0.1
2. bem-components v 3.0.1
3. enb

Около 100 страниц накопилось. Сборка идет около 30..70 с (30 000..70 000 мс) Можно ли что-то подкрутить для увеличения скорости?

Здравствуйте, извините, за еще один пост. Просто решил разобраться окончательно и перестать писать в коде //TODO Может и другим будет полезно

Прочем доки, не нашел такого момента как динамический стиль.

Приведу пример, есть навигационный блок на сайте, при открытии меню некоторые компоненты внутри этого блока должны изменить свой вид.

Вот пример

<nav id="navigation-main" class="navigation-bar l-navigation-bar">
    <div class="navigation-bar__container">
        <div class="navigation-bar__toggle">
        </div>
        <div class="navigation-bar__logo nav-logo">
        </div>
        <div class="navigation-bar__menu l-navigation-menu">
            <div class="nav-menu">
            </div>
        </div>
        <div class="navigation-bar__phone-number nav-phone">
        </div>
    </div>
</nav>

Вот нажимает пользователь на меню navigation-bar__toggle и в JS добавляется класс is-menu-opened к элементу с id navigation-main

Собственно вопрос теперь как правильно сделать ? У меня есть две идеи Стоит заметить что на выходе после компиляции получаются практически одинаковые результаты, то есть разница лишь в препроцессоре в данном случае (SASS)

1. Переложить все обязанности на класс is-menu-opened, то есть он осведомленным в структуре HTML

   .is-menu-opened
     height: 100%
     background-color: #000
     .nav-menu-list
       visibility: visible
       opacity: 1
     .nav-menu-list__item
       opacity: 1
   

2. Второй вариант, это чтобы сам модуль рисовал себя при определенном условии как надо. В данном каждый модуль должен знать что его могут обрамить в класс is-menu-opened, но с другой стороны нету зависимости от HTML структуры , пример

   .nav-logo
   padding-left: 5%
   text-align: left
   color: $white-color
   .is-menu-opened &
    visibility: visible
   

Подскажите пожалуйста может есть какие-то еще более рациональные подходы и как правильно и элегантно решать подобные задачи. И может есть в общем какие-то замечания по структуре, буду признателен за критику и советы.

Спасибо большое.

Здравствуйте,

Спасибо, использую в проектах БЭМ. Использую не весь стек, а именования.

Возник вопрос про расположение именно в дереве.

Вот код

<div class="burger-menu__container">
            <div class="burger-menu" id="burger-toggle">
                <div class="burger-menu__bar burger-menu__bar--top"></div>
                <div class="burger-menu__bar burger-menu__bar--bottom"></div>
            </div>
  </div>

Вопрос, может ли самый главный блок модуля (burger-menu) находится по иерархии внутри своего элемента ? Мне это не очень нравится. По семантике и по виду в общем.

Контейнер, тоже вроде это элемент модуля, но по иерархии находится выше.

Как правильно поступить в этом случае ?

 <div class="burger-menu-container">
            <div class="burger-menu" id="burger-toggle">
                <div class="burger-menu__bar burger-menu__bar--top"></div>
                <div class="burger-menu__bar burger-menu__bar--bottom"></div>
            </div>
  </div>

Сделать как отдельным модулем ?

Подскажите пожалуйста как правильно сделать ?

Спасибо

Доброго вечера! После долгих мучений, закончил первый сверстанный проект на связке gulp+bem. Встал простой вопрос с интеграцией файла js. Алгоритм действий такой: -Сверстал финальную страничку сайта-каталога (header, content, footer все в одной верстке) -Получил на выходе 3 файлика+папку с фотками и шрифтами, с этим вопросов нет

В файле js тянутся некоторые библиотки и при сборке они попали естественно в готовый файлик js. В итоге получился огромный файл, но суть проблемы в том, что я не везде использую некоторые фишки и по сути половина кода просто грузится в пустую. Как с этим бороться ? Интегрирую в Битрикс.

Сделал простой wysiwyg редактор. Посмотреть можно здесь Код здесь Работы еще много, поэтому буду рад любой помощи. Присоединяйтесь:)

block('my-button-special').replace()( function() {
    return {
        block:'my-button',
        url: this.ctx.url,
        content: this.ctx.content,
        mix: {
            block: 'my-button-special',
            js: function() {
                 //тута всё ок
            }.bind(this)()
        },
    };
});

Вёрстка получается какая нужна, атрибут data-bem тоже правильный, но мода my-button-special_js_inited нет.

Привет всем! Решил я почитать исходники технологии deps для enb. Нашел поддержку .yaml файлов. Но с какой то другой схемой описания зависимостей. в документации ничего не нашел. Хотелось бы узнать, для чего потребовалась новая схема описания зависимостей? Зачем использовать yaml - это понятно - меньше писать. но почему его нужно писать иначе чем deps.js?

У меня где-то с полгода назад возникла идея о создании интерактивного туториала. Сейчас решил поделиться этой идеей.

Суть игры/туториала

Погружение людей в БЭМ, начиная с самых высоких абстракций. А именно с готовых блоков.

Процесс

Уровень 1

Человеку даётся задание собрать дом. Есть готовые блоки: дверь, ручка, окно, крыша и т.д. Человек должен перетаскивать блоки на странице, делать блоки элементами других блоков (собирать свои блоки/сеты/группы).

Для прикола можно сделать кнопку: "Землятресение!". Если человек плохо собрал дом - всё развалится.

Уровень 2

Человек делает JS логику на i-bem по взаимодействию элементов на странице (по готовым API)

Уровень 3

Знакомим человека с шаблонизаторами

Уровень 4

Знакомим человека со сброщиками

Уровень 5 и т.д.

Что это даст?

Системный подход к обучению + всегда можно узнать на каком уровне человек ;)

Написал в общих чертах, но мысль, кажется донёс. Делитесь в комментариях своими соображениями и идеями :)

Возникла проблема при установке нового билда с кешированием на клиенте js и сss файлов в проекте. Проект старый на бакенд на java использует RequireJS. Решил старый проект перевести на более современные технологии. Для этого поставить gulp в него добавить плагин который пробежится по проекту и сформирует bower.json используемых js библиотек. Далее после правки этого файла и запуска плагина для bower загрузить новые версии библиотек. После использовать gulp + gulp-assets, слияние, минификацию, sourcemap. Вот тут не понимаю как будут работать assets. Что из нескольких js будет создан 1 для страницы понятно. Но как это подключится в JSP? У меня в JSP есть

require-jquery.js старое костыльное решение его переделаю Как я понял эта строка должна будет изменится или только содержание fixativeLog.js изменится? Как тогда будет работать RequireJS? Есть еще RequireJS optimizator. Внесите ясность какой путь к результату.

Возможно ли спроектировать i-bem блок (без DOM представления) так, чтобы при первом вызове BEM.create('block') создался блок, при последующих отдавался уже инстанс этого блока?

Всем привет. Занялся портированием Animate.CSS на БЭМ. Начал делать для себя, но т.к. это оказалось удобно - решил сделать для сообщества. Портирована для тех, кто не хочет каждый раз настраивать анимации вручную.

Ссылка на GitHub с инструкцией по подключению.

Статус портирования

Перенесены все анимации из AnimateCSS, они доступны по модификатору type:

Например: fadeInDown -> animate_type_fade-in-down

Дополнительно

В дополнение есть ещё несколько модификаторов: animation_speed_{1,2,3,4,5} - скорость анимации animation_delay_{1,2,3,4,5} - задержка анимации animation_direction_{reverse,alternate,alternate-reverse} - направление анимации

Благодарность

Спасибо @Flyer3d за помощь с портированием эффектов и также сообществу за голосование/обсуждение реализаций.

JS

На данной стадии JS блока есть только для bem-core@v4. Позже появится для bem-core@v3.

Сейчас JS позволяет менять модификаторы и вещает 3 вида событий: start, end, iteration.

Чего ждать в ближайшем будущем?

Расширение API. Будут добавлены методы: queue, start, stop, pause, reset

Примерная реализация:

// Просто старт анимации
animation.start('fade-in-down');

// С передачей объекта с функциями обратного вызова
animation.start('fade-in-down', {
  onStart: function() {},
  onEnd: function() {},
  onIteration: function() {}
});

// Простой обратный вызов по завершению
animation.start('fade-in-down', function () { 
  console.log('animation end')
});

// Простая очередь
animation.queue(['fade-in-down', 'flip-x', 'fade-out']);

// Очередь с обратным вызовом по завершению
animation.queue(['fade-in-down', 'flip-x', 'fade-out'], callback);

// Расширенные параметры для очередей
animation.queue([
  {type: 'fade-in-down', onStart: callback, onEnd: callback}, 
  {type: 'flip-x', onStart: callback, onEnd: callback}, 
  {type: 'fade-out', onIteration: callback}
], callback);

Всем приятной разработки! :)

Жду комментариев и участия заинтересованных людей ;)

upd Спасибо @JiLiZART, добавил ещё несколько методов в планы :)

Про блок в методологии сказано: "Блок не должен влиять на свое окружение, т. е. блоку не следует задавать внешнюю геометрию (в виде отступов, границ, влияющих на размеры) и позиционирование."

Какие именно CSS свойства не следует использовать при стилизации блока? Считается ли, что width, height, border, margin, position, float оказывают влияние на окружение? А padding, display влияют? Ещё свойства?

Здравствуйте. Подскажите, пожалуйста, что за технология используется, которая следит за используемым блоком и подключает стили этого блока если он используется, а если блок удаляет из bemjson, то, соответственно, отключается и его файл стилей. Возможно ли это реализовать вне технологии БЭМ? Спасибо.

По ходу своей работы, часто сталкиваюсь с ajax запросами внутри i-bem блоков. Часто повторяющиеся паттерны решил вынести в отдельную надстройку над jquery.ajax.

Где можно использовать?

Допустим у вас есть кнопка, которая по клику на себя, добавляет куда то контент, а когда контента нет, удаляет сама себя

_onButtonClick: function () {
    Http
        .abortable(this)
        .get(this.params.url)
        .then(function (response) {
            BEMDOM.replace(this.domElem, response.getText());
        }.bind(this));
}

Eсли вдруг по кнопке нажали два раза, предыдущий запрос отмениться, так же навешаются правильные обработчики, которые, в случае удаления блока, остановят запрос и удалят все ненужные ссылки.

Или по клику на ссылку вам нужно подгрузить текст для модального окна, закешировать его, и при последующих кликах отдавать данные из кеша.

_onButtonClick: function () {
    Http
        .once(this)
        .get(this.params.url)
        .then(function (response) {
            this.showModal(response.getText());
        }.bind(this));
}

запрос на сервер отработает только единожды, последущие вызовы, этой функции, запросы на сервер делать не будут, просто буду возвращать отработанный промис.

Или вам нужно делать много разных запросов в разные места, но нужно чтобы выполнился только последний.

this._req = Http.abortable(this);

this._req.get(this.params.someUrl).then(this._onSomeDone); //этот запрос отменится, т.к следом идет другой
this._req.get(this.params.anotherUrl).then(this._onAnotherDone);

Не нужно плодить дополнительных переменных, самому вызывать abort() у jqXHR перед другим запросом.

Или если нужно сделать два разных запроса в разные места

Http.abortable(this, 'some').get(this.params.someUrl).then(this._onSomeDone);
Http.abortable(this, 'another').get(this.params.anotherUrl).then(this._onAnotherDone);

https://github.com/JiLiZART/bem-http

Ставим через bower install bem-http, и подключаем в уровнях { path: 'libs/bem-http/common.blocks', check: false }.

Пример как использовать в блоке https://github.com/JiLiZART/bem-http/blob/master/example.blocks/app/app.js

P.S. Если есть какие либо идеи по улучшению API, буду очень благодарен.

Никого не интересует HackoberFest? https://hacktoberfest.digitalocean.com/

Я специально для вас выбрал самые простые задачки (можно сделать за час несколько).

У вас больше десяти дней (до конца октября), чтобы отправить PR и получить футболки за принятые изменения. Я готов содействовать/пояснять/помогать.

BEMJSON:

        {
            block: 'menu',
            elem: 'content'
        }

нужно получить:

        {
            block: 'menu',
            elem: 'content'
        },
        {
            block: 'menu',
            elem: 'overlay'
        },

c помощью шаблона:

block('menu').elem('content')(
    tag()(false),
    content()(function() {
        return [
            {
                elem: 'content2',
            },
            {
                elem: 'overlay'
            }
        ]
    })
);

можно получить почти то, что нужно, а но заменить элемент content2 на content не получается.

День добрый.

почему я не могу получить блок с модификатором ?

modules.define( 'form', // имя блока ['i-bem__dom', 'jquery'], // подключение зависимости

// функция, в которую передаются имена используемых модулей
function(provide, BEMDOM, $) {
    provide(BEMDOM.decl(this.name, { // декларация блока
        onSetMod: { // конструктор для описания реакции на события
            'js': {
                'inited': function() {

                    var _this = this;

                    this._person = this.findBlockInside('input', 'type', 'person');

                    // событие, на которое будет реакция
                    this.bindTo('submit', function(e) {
                        // предотвращение срабатывания события по умолчанию:
                        // отправка формы на сервер с перезагрузкой страницы
                        e.preventDefault();

                        this.elem('botmdesc').text('Уважаемый ' +
                            this._person.getVal() + '!');

                    });
                }
            }
        }
    }));
});

Уважаемая команда разработчиков БЭМ, может проведете вебинар по БЭМ для новичков, где будут рассмотрены такие моменты как:

1. Использование картинок в css и html;
2. Подключение и использование шрифтов;
3. Вынесение логических частей в отдельные файлы: header, footer и т.д.
4. Подключение и использование сторонних библиотек: как jquery, так и другие библиотеки использующие данный framework: magnific-popup, bx-slider и т.д. Просто на примере одного любого.
5. Подготовка проекта для production.

Добрый день! Начал верстку интернет-магазина в котором более 30 страниц. И тут же заказчику уже захотелось кое-что поменять в шапке. Страшно представить, что когда будет сверстан весь проект и начнутся правки, то придется ходить по ВСЕМ страницам и менять что-то в одинаковых блоках (header, footer, menu, rightbar и т.д.). Это будет просто самоубийство, и при всём уважении к данной методологии и её способности увеличивать скорость создания проектов, для данного случая эту будет намного дольше. Я пересмотрел и перечитал уже кучу материалов, но, блин, не могу сделать, чтобы это было корректно и удобно. Подскажите кто-нибудь, пожалуйста, как такое реализовать. Ведь полюбому есть решения данной проблемы, т.к. БЭМ используется, в основном, в крупных проектах. Прям очень очень прошу помощи и указать как такое реализовать, потому что не хочется, особенно при верстке такого крупного проекта, отказываться от БЭМ. Да, использую в качестве сборщика gulp, т.е. как реализовать это всё на нём. Спасибо!

Приветствую, Уважаемые БЭМ-пользователи! Возникла проблема с подключаемыми шрифтами, а точнее с путями при их использовании. В папке common.blocks создал блок fonts/_face и тут складываю все шрифты (font_face_roboto.eot, .ttf, .woff и файл font_face_roboto.scss в котором прописываю правило font-family для модификатора .font_face_roboto). Затем миксую к нужному блоку/элементу mix: [{ block: 'font', mods: { face: 'roboto-regular' } }]. Всё бы отлично - в стили нужный шрифт подключается, но вот пути остаются относительно файла font_face_roboto.scss, который лежит папке common.blocks создал блок fonts/_face, а стили скомпилировались в папку desktop.bundles/index/index.min.css Есть ли какие-либо способы решения данной проблемы? Чтобы пути автоматически менялись, либо нужные шрифты автоматически переносились в нужную папку. Поискав пути решения данной проблемы, так понял, что для этого есть borschik, но я использую сборку на gulp, возможно ли как-то настроить всё это дело? Спасибо!

Всем привет, в ходе перехода на бэм, возникает ряд вопросов, которые прям так и хочется решить по старинке, но нужно двигаться вперед. Итак вопрос, есть блок с формой, в нем куча инпутов, одному из них я передаю параметр name:'phone', в простом варианте js я просто бы сделал бы так

$(document).ready(function() {
     $('input[name="phone"]').mask('+7(999) 999-99-99');
     $('button').on('click', function(event) {
        event.preventDefault();
});

В варианте с бэм, как я понимаю, я создаю в папке desktop.blocks/form файлик form.js в нем описываю данную задачу, определяю блок form и тут встает вопрос как реализовать поиск input с параметром name:'phone': -повесить на него модификатор и найти через него -отыскать по параметру name

Как будет правильнее, может есть примеры какие, кроме того что предствленно в Быстром старте

Добрый день, Не могу понять в чем дело. Наверное, какая-то глупая ошибка. Я пытаюсь примиксовать стили к input и select в блоке qa-form.

.bemjson.js

        block: 'qa-form',
        url: "http://guk/api/feedback",
        content: [
            {
                elem: 'fields',
                content: [
                    {
                        block: 'input',
                        mods: {'has-clear': true},
                        name: 'flexibility'
                    },
                    {
                        block: 'select',
                        mods: {mode: 'radio'},
                        name: 'slenderness',
                        val: 1,
                        options: [
                            {val: 1, text: 'Report'},
                            {val: 2, text: 'Workshop'},
                            {val: 3, text: 'Round-table conference'}
                        ]
                    }
                ]
            }
        ]

qa-form.bemhtml.js

block('qa-form') ( js()(true),

tag()('form'),

block('input').mix()({  mods: {theme: 'islands', size: 'm'} }),
block('select').mix()({mods: { theme: 'islands', size: 'm'}}),

attrs()(function () {
    return {action: this.ctx.url};
})

);

qa-form.deps.js ({ mustDeps: [ {block: 'input', mods: {theme: 'islands', size: 'm'}}, {block: 'select', mods: {theme: 'islands', size: 'm'}}, ] })

В результате для input стили подключаются, а для select нет. Позже я понял, что внутри select есть блоки button и popup, для которых стили не подключаются. Если сделать так:

qa-form.bemhtml.js

block('qa-form') ( js()(true),

tag()('form'),

block('input').mix()({  mods: {theme: 'islands', size: 'm'} }),
block('select').mix()({mods: { theme: 'islands', size: 'm'}}),
block('button').mix()({mods: { theme: 'islands', size: 'm'}}),
block('popup').mix()({mods: { theme: 'islands', size: 'm'}}),

attrs()(function () {
    return {action: this.ctx.url};
})

);

qa-form.deps.js ({ mustDeps: [ {block: 'input', mods: {theme: 'islands', size: 'm'}}, {block: 'select', mods: {theme: 'islands', size: 'm'}}, {block: 'button', mods: {theme: 'islands', size: 'm'}}, {block: 'popup', mods: {theme: 'islands', size: 'm'}}, ] })

То стили подключаются и для select, но он не работает (кнопка не нажимается). Видимо почему-то js не подключается.. P.S. Извините, не понял как здесь правильно вставлять код, чтобы все было красиво.

При создании блока командой bem create -b block-name выдает сабж. NODE_PATH прописан, если что. В чем может быть дело?

Смотрел доклад Владимира Гриненко, и там была показана одна из фишек, что стили определенного блока подключаются в общий файл стилей, если этот блок задействован, а если его удаляешь из файла, например index.bemjson.js, то и стили этого блока автоматически отключаются, т.к. не нужно идти и вручную инклудить/удалять нужный файл стилей блока. Задействовав сборку project-stub на gulp, заметил, что если блок подключаешь, то стили его подключаются автоматически в результирующий css-файл, но когда удаляешь этот блок, то стили всё равно остаются для данного блока, хотя он уже не нужен. Это пока не доработка проекта на gulp? Либо я что-то не так настроил? Также при переопределении блока, стили одних правил тоже остаются, пример: в common.blocks для блока button задана высота 15px, а в desktop.blocks высота для данного блока уже 10px, но оба эти правила попадут в результирующий css, хотя на вебинаре было показано, что попадет только последнее переопределенное правило, т.к. это логично, ведь оно переопределяет правило написанное выше и ему уже нет смысла находиться в файле стилей. Там правда была выполнена команда для выкатки в production, после чего все стили почистились, такая же команда есть для сборки на gulp?

При установке зависимостей npm install, выдаёт подобного рода ошибку:

npm WARN deprecated native-or-bluebird@1.2.0: 'native-or-bluebird' is deprecated. Please use 'any-promise' instead. npm WARN optional dep failed, continuing fsevents@1.0.14 npm WARN deprecated minimatch@3.0.0: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue npm WARN engine puml-link@0.0.1: wanted: {"node":"0.10"} (current: {"node":"4.6.0","npm":"2.15.9"})

jsonpath@0.2.7 postinstall C:\Git\bem\node_modules\gulp-bem-bundle-builder\node_modules\gulp-bem-src\node_modules\bem-config\node_modules\jsonpath node lib/aesprim.js > generated/aesprim-browser.js

npm WARN deprecated minimatch@0.2.14: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue npm WARN engine puml-link@0.0.1: wanted: {"node":"0.10"} (current: {"node":"4.6.0","npm":"2.15.9"})

bem-project-stub@1.7.0 postinstall C:\Git\bem npm run deps

bem-project-stub@1.7.0 deps C:\Git\bem bower i --allow-root

bower bem-components#3.0.1 cached https://github.com/bem/bem-components.git#3.0.1 bower bem-components#3.0.1 validate 3.0.1 against https://github.com/bem/bem-components.git#3.0.1 bower bem-components#3.0.1 ECMDERR Failed to execute "git ls-remote --tags --heads https://github.com/bem/bem-components.git", exit code of #128 fatal: unable to access 'https://github.com/bem/bem-components.git/': Failed to connect to github.com port 443: Timed out

Additional error details: fatal: unable to access 'https://github.com/bem/bem-components.git/': Failed to connect to github.com port 443: Timed out

npm ERR! Windows_NT 6.3.9600 npm ERR! argv "C:\nodejs\node.exe" "C:\nodejs\node_modules\npm\bin\npm-cli.js" "run" "deps" npm ERR! node v4.6.0 npm ERR! npm v2.15.9 npm ERR! code ELIFECYCLE npm ERR! bem-project-stub@1.7.0 deps: bower i --allow-root npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the bem-project-stub@1.7.0 deps script 'bower i --allow-root'. npm ERR! This is most likely a problem with the bem-project-stub package, npm ERR! not with npm itself. npm ERR! Tell the author that this fails on your system: npm ERR! bower i --allow-root npm ERR! You can get information on how to open an issue for this project with: npm ERR! npm bugs bem-project-stub npm ERR! Or if that isn't available, you can get their info via: npm ERR! npm ERR! npm owner ls bem-project-stub npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request: npm ERR! C:\Git\bem\npm-debug.log

npm ERR! Windows_NT 6.3.9600 npm ERR! argv "C:\nodejs\node.exe" "C:\nodejs\node_modules\npm\bin\npm-cli.js" "install" npm ERR! node v4.6.0 npm ERR! npm v2.15.9 npm ERR! code ELIFECYCLE npm ERR! bem-project-stub@1.7.0 postinstall: npm run deps npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the bem-project-stub@1.7.0 postinstall script 'npm run deps'. npm ERR! This is most likely a problem with the bem-project-stub package, npm ERR! not with npm itself. npm ERR! Tell the author that this fails on your system: npm ERR! npm run deps npm ERR! You can get information on how to open an issue for this project with: npm ERR! npm bugs bem-project-stub npm ERR! Or if that isn't available, you can get their info via: npm ERR! npm ERR! npm owner ls bem-project-stub npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request: npm ERR! C:\Git\bem\npm-debug.log