Сборка Front-end’a

Сборка Front-end’aАвтоматизация и структуризация

Ключевые вопросы

Зачем?Что выбрать?

Преимущества?

Структура проекта

Задачи- Сжатие и объединение js-файлов,

проверка валидности кода.- Компиляция LESS, SASS файлов- Автоматическое обновление страницы

после изменений.- Сжатие скомпилированных CSS-файлов- Создание “спрайтов” из изображений.

Инструменты для сборки- Grunt (http://gruntjs.com)- Gulp (http://gulpjs.com)- Jake (http://jakejs.com)- Broccoli (https://github.com/broccolijs/broccoli)- Brunch (https://github.com/brunch/brunch)

GruntПреимущества:- Большое количество плагинов:

1. http://gruntjs.com/plugins - 4,4032. https://www.npmjs.com - 13502

- Универсальность.- Много готовых решений.

Недостатки:- Скорость работы.- “Многословен”

Grunt Config File

Gulp- Быстродействие (Node Streams)- Относительная простота и читабельность

настроек файла конфигураций.- Плагины выполняют только одну

функцию.

Gulp config file

BrunchДокументация:https://github.com/brunch/brunch

Заготовки для приложения: http://brunch.io/skeletons.html

Конец

Спасибо за внимание!