Сборка фронта на nodejs

12 Июля 2016 2749 , , ,

На работе появилась задачка, собрать build систему фронта для одного проекта. На самом проекте уже использовался gulp с несколькими плагинами для облегчения повседневной жизни.  Как таковой фронт дев версия от прод версии ничем не отличалась, все console.log и комментарии в коде с FIXME и TODO оставались на месте) про минификацию, обфускацию и т.п. речи небыло. Сам проект написан на symfony в качестве билд системы используется capifony, система Assets самой symfony не используется в силу наличия gulp’a, а также у проекта две веб морды, мобильная и настольная + необходимо поддерживать stage и production режимы.

Первое, с чем стоит определиться, так это с набором инструментов и что необходимо сделать. На самом проекте используются следующие типичные фронтенд принадлежности:

  1. JavaScript — будем транспайлить из ES6 в ES5. На дев версии будем держать ES5 в beautify виде с дебаг сообщениями, на проде будем минифицировать, убирать комментарии и дебаг и применим uglify. Различные плагины просто сожмем.
  2. SASS — собираем для дева compact для прода compress версии.
  3. Растровые иконки — собираем в спрайт на деве и проде.
  4. SVG иконки — собираем шрифт и sass файл.
  5. Контент изображения и баннеры — обработаем pngquant для облегчения.

Теперь про запуск билда и интеграцию с уже существующими технологиями. Фронтенд разработчик не участвует в момент деплоя проекта и бекенд разработчику не нужно знать о всей тонкости сборки, ему надо просто запустить сказанную фронтом команду. Значит в нашем случае, это будет простейший bash скрипт, который обновит зависимости npm и в зависимости от параметра запустит nodejs с нужными параметрами.

Суть и скрипт очень просты. В целом можно и саму ноду было запускать с параметрами, но мы же об этом не собираемся толковать администратору или бекенд разработчику. Теперь переходим к самой nodejs. Что нам нужно? Иметь возможность выполнять две разные сборки (мобильную и настольную) в два разных режима (dev и production). А также сохранить возможность использовать gulp watcher на проекте для повседневной dev разработки.

Что мы делаем? мы получаем из аргументов buildMode и buildType и подключаем в зависимости от buildType скрипт сборки который в свою очередь уже будет отвечать, за конкретную сборку необходимого нам билда. И в зависимости от параметра buildMode запускаем деплой или ватчер. Я рассмотрю лишь 1 вариант сборки настольной версии, она не сильно отличается от мобильной.

Первое это сам запуск функции билда. Что есть билд? Это последовательное выполнение gulp задач. В определенную директорию с определенными настройками. Директории и настройки с которыми должны работать задачи мы соответственно выносим в отдельный файл.

Т.к. набор задач один, разные только параметры. Держим 1 файл с набором gulp команд. Пример gulp файла…

Какие задачи и с какими параметрами будем вызвать, мы выяснили, осталось их вызвать. Вернемся к нашему build.desktop.js. В gulp’e есть несколько способов запускать задачи синхронно и устанавливать между ними зависимости. Я же хочу сохранить возможность использовать задачи раздельно друг от друга и для решения пробелмы с асинхронностью задач я воспользусь промисами. Каждую задачу мы будем вызвать по имени навешивать на нее callBack и в нем выполнять resolve для промиса. В конечном итоге мы получим лаконичную цепочку вызовов команд + самый гибкий контроль над их последовательностью и дальнейшему расширению.

Напишем наш promise task wrapper

Теперь осталось написать саму функцию билда)

Таким вот нехитрым способом начали собирать фронт на проекте) буду рад критике и конструктивным дополнениям)

Подписывайтесь на обновления

Читайте RSS ленту

Комментарии

Добавить комментарий