В предыдущих частях статьи про сборку фронтенда мы поговорили про основы сборки и написали простое тестовое приложение на backbone + require.js.

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

Внимание, это не статья по основам основ gulp! Предполагаю, что Вы знаете, что такое nodejs и npm. Если не знаете, то лучше предварительно погуглите, что это такое и как это все поставить. Установка nodejs, npm и gulp займет у Вас 5-10 минут. А теперь к самой статье.

В предыдущей статье мы договорились разобраться, как собирать фронтенд с помощью gulp. Но предварительно нужно сделать тестовое приложение для того, чтобы было что собирать. В качестве примера сделаем простенькую страничку на Backbone. Управлять модулями будем с помощью require.js. Работать с dom поможет добрая jQuery, а с данными - lodash. Подгружать html-шаблоны мы сможем с помощью requirejs-text.

Так как приложение тестовое, я не буду уделять внимание функциональности - все предельно просто. Обычная страничка с парой текстов и картинкой. Мы создадим одну модель, представление view к ней, загрузим html-шаблон и отрендерим все это добро. Предполагаю, что Вы уже знакомы с Backbone и Require.js, поэтому подробно каждую строчку расписывать не буду. Код очень простой, но все-таки без знания основ этих библиотек не все будет очевидно.

Если Вы не знакомы с Backbone, но интересуетесь созданием Single Page Application в целом и этой замечательной библиотекой в частности, оставляйте комментарии в статье, что-нибудь придумаем :-)

А теперь к делу.

Уже давно инструменты сборки фронтенда перешли из разряда экзотики в необходимую часть работы над проектом. Я хочу поделиться некоторыми наработками по части организации проекта, его структуры, рассказать, какие задачи я решаю с помощью сборки и какими инструментами. Мы напишем небольшое тестовое приложение в связке Backbone + Require.js. Настроим окружение для работы над проектом в режиме "девелопмента" и "продакшена", посмотрим на их отличия. И в конце напишем задачи для сборки проекта с помощью инструмента сборки gulp и его плагинов.

Будут рассмотрены такие вопросы: работа со стилями sass с использованием sourcemaps, склеивание и сжатие js-файлов, сборка requirejs с помощью rjs, препроцессинг html, очистка и копирование файлов, оптимизация изображений, поднятие локального веб-сервера и режим наблюдения - watch-таски.

Свершилось! Заключительный урок серии "Фильтры в интернет-магазине". В статье доработаем некоторые детали, чтобы придать каталогу завершенный вид. Мы узнаем, как обновлять список брендов и цены при смене категории, а также некоторые другие вещи. Начинаем.

Пятый урок серии будет очень невелик. Настолько, что сначала я хотел включить его в заключительный урок серии про фильтры. Но все-таки решил выделить отображение товаров в браузере в отдельную статью. Этот урок будет очень позитивным в том плане, что небольшие усилия позволят нам, скажем так, "вживую" увидеть результат своей работы: меняем настройки фильтров в браузере и сразу видим отфильтрованный каталог. В принципе это и есть цель всей нашей работы. В заключительном же, шестом уроке, я расскажу о нескольких специфических вещах, которые требуют не столько написания кода, сколько разъяснения, зачм этот код нужен. А пока быстро пройдем пятый урок и полюбуемся, что у нас получится.

В предыдущем уроке мы научились собирать данные на клиенте и отправлять их на сервер. А на сервере написали заглушку в том месте, где должны возвращаться товары, отфильтрованные по введенным параметрам. Сейчас мы избавимся от заглушки и напишем пару методов и запросов, которые вытаскивают из базы нужные товары и возвращают их клиенту. Урок достаточно короткий. Приступаем

Мы добрались до третьего урока серии, посвященной фильтрам в интернет-магазинах. Сейчас мы научимся собирать данные на клиенте и отправлять их на сервер. На сервере напишем небольшую заглушку, возвращающую нам какие-то сведения. Как и предыдущие уроки, этот представляет собой логически завершенную часть, по прохождении которого Вы увидите законченный результат.

Про git merge и git rebase написаны тысячи статей. Зачем же нужна еще одна?
Разбираясь в свое время с git rebase, я не нашел ни одной статьи, описывающей этот инструмент с точки зрения начинающих пользоваться гитом. Я видел множество схем ребейза, но так и не мог понять, для чего же все-таки нужен rebase, чем он так отличается от merge. Когда стоит использовать rebase и что будет плохого (и будет ли), если его не применять.
Я не люблю абстрактные схемы. Поэтому покажу простой пример из повседневной жизни двух коллег-программистов. Наглядно, с картинками и подробностями, мы увидим, как работает merge и rebase. Для давно работающих с гитом в статье не будет ничего нового. Тем же, кто только начинает знакомиться с rebase, надеюсь, статья будет полезной.

Переходим ко второй части наших уроков. Здесь рассмотрим структуру проекта, его файлов и папок, сверстаем блоки с фильтрами, товарами и подключим плагин jQueryUI.slider для регулировки цен.

В первом уроке из серии статей, посвященных созданию фильтров в интернет-магазине, мы определимся, какие данные в базе нам нужны. Создадим нужные таблицы и заполним их тестовыми данными. Приступим