сентябрь 24 , 2016

Будут рассмотрены такие вопросы: работа со стилями sass с использованием sourcemaps, склеивание и сжатие js-файлов, сборка requirejs с помощью rjs, препроцессинг html, очистка и копирование файлов, оптимизация изображений, поднятие локального веб-сервера и режим наблюдения - watch-таски. Добро пожаловать в статью, будет много интересного!
P.S. Материала много, поэтому статья будет разбита на 3 части: основы сборки и организация проекта, написание тестового приложения на Backbone + Require.js и собственно сборка с помощью gulp.

Зачем нужна сборка фронтенда.

Один из самых важных принципов в разработке - это модульность. Разбиение кода проекта на множество небольших, в идеале слабосвязанных между собой кусочков-модулей. Это касается далеко не только javascript-кода. Это относится и к стилям, и html-шаблонам, к различным библиотекам.

Примерно так может выглядеть структура простого приложения, написанного на Backbone + Require.

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

Разница хорошо заметна: вместо десятков файлов мы имеем один index.html, один css-файл, оптимизированные и сжатые изображения в отдельной папке, хотя на скриншоте этого и не видно:-)

А также самое интересное: в папке js мы получили всего 3 сжатых файла.
P.S. Почему три, а не один, расскажу позже.
Замечу, что это реальная структура тестового приложения, которое мы вскоре напишем.

Я описал лишь одну причину использования инструментов сборки, но она уже достаточна, чтобы начать использовать gulp, grunt, webpack или что-то подобное в своих проектах. Причем не имеет значения, пишем ли мы громадный сервис, небольшое SPA (как в нашей статье) или landing page. Принципы сборки одинаковы для всех проектов и различаются лишь разнообразием задач и подходов к их решению. В нашем примере мы создадим такую структуру, которая может сколь угодно расшириться в дальнейшем, но на выходе всегда будет аккуратная стопка файлов, готовая к выливке на ваш продакшен - боевой сайт.

Как правильно организовать проект.

Принцип такой: есть раздел с девелоперскими файлами, есть с собранными и все остальное, что это добро обслуживает. Создадим в корне проекта 2 папки: src и build. В src и только в src мы будем работать, создавать новые файлы, редактировать их и вообще развлекаться. На скриншоте выше, там, где пара десятков файлов, Вы видели именно содержимое папки src нашего тестового проекта. А чуть ниже несколько аккуратных файлов из папки build. Она формируется только автоматически, инструментами сборки, ничего самим там править не нужно. Все равно при каждой сборке ее содержимое затирается новыми файлами (а в режиме development папки build вообще нет - удаляется, дабы не мозолить глаза)

Кроме src и build в корне будут лежать файлы package.json, gulpfile.js, папка node_modules и опционально, .gitignore (если Вы работает с гитом). У меня еще можно заметить папку logs - это порождение apache и давняя привычка держать логи проекта в его же папке, конечно, исключив ее из репозитория гита:-)

Вот так выглядит структура проекта целиком:

По содержимому build, думаю, вопросов нет, по src поясню подробнее:

• 1. html - index.html, корневой индексный файл проекта. Почему не сразу в корне src? Потому что он будет препроцесситься и создаваться gulp-ом. Каким образом, узнаем немного позже, когда вплотную займемся сборкой.
• 2. img - изображения, не сжатые, обычные
• 3. js - вся javascript-движуха проекта, модели и представления Backbone
• 4. lib - сторонние библиотеки, вроде backbone.js, require.js, lodash.js и прочих
• 5. scripts - js-скрипты, которые необходимы на боевом сайте, но не нужны в режиме разработки. Имеются в виду коды для аналитики, различных экспериментов и прочих маркетинговых штук.
• 6. styles - sass-файлы со стилями. В эту же папку будет складываться собранный css-файл (только для режима девелопмента)
• 7. tpl - html-шаблоны. Используются представлениями Backbone с помощью плагина require.js text

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

Какие задачи сборки мы решим.

Напомню, что мы договорились о двух режимах сборки: development и production. Все наши задачи мы будем писать, помня об этих двух режимах. Не все операции нам нужны в процессе разработки, и не все в сборке для продакшена.

Вот список того, чем мы займемся после написания тестового приложения:

• 1. Очистка файлов и папок от результатов предыдущей сборки
• 2. Сборка css из sass-файлов, со сжатием и без
• 3. Подключение sourcemaps к стилям, заодно покажу на примере, зачем это нужно
• 4. Сборка js-бандла с помощью requirejs
• 5. Склеивание и сжатие отдельных js-файлов (аналитики)
• 6. Препроцессинг html
• 7. Оптимизация и сжатие изображений
• 8. Поднятие локального веб-сервера
• 9. Задачи наблюдения за файлами при работе в режиме девелопмента - watch-таски
• 10. Сбор отдельных задач в кучу - итоговые таски для production-сборки и development-работы

Итак, мы порассуждали, зачем вообще нужна сборка фронтенда, определились со структурой проекта, подробно разобрали, что мы хотим от сборки и в общих чертах поговорили про тестовое приложение. В следующей части статьи мы займемся написанием простенького Backbone-приложения в связке с Require.js. Если Вы не знакомы с Backbone и/или Require.js, то ничего страшного нет. Собственно Backbone-овского кода в приложении мало. Вы легко можете вместо него использовать любимую библиотеку или просто писать код на javascript/jquery и пропустить раздел настройки requirejs.

В те времена, когда сайты были небольшими, необходимости в отдельной сборке фронтенда не было. Однако объем и сложность CSS и JS все увеличивались, и вид, в котором удобно разрабатывать, стал сильно отличаться от вида, в котором нужно показывать результат пользователю. Появились такие задачи, как конкатенация (склеивание) файлов, минимизация кода и даже предварительная компиляция. Результатом этого стали специализированные системы сборки фронтенда, о которых мы и расскажем.

Разумеется, как только необходимость в сборке стала ощутима, тут же на фронтенд начали переползать инструменты, использовавшиеся бэкендом. Основная их проблема и причина того, что в данный момент их все меньше используют для фронтенда, - они совершенно не заточены под его специфику, так как структура проекта, используемые технологии и цикл разработки очень сильно зависят от задач проекта и могут значительно отличаться. Тот же Ant, например, обладает многословным синтаксисом и не особо умеет делать нужные для фронтенда вещи: встроенных задач совсем немного, а расширяется он плохо. Если говорить о GNU make, то он гораздо более универсальный, поскольку оперирует shell-командами. Из недостатков нужно упомянуть об особом синтаксисе, который надо дополнительно изучать, необходимости хорошо знать shell, а также тенденции к быстрому усложнению Makefile при росте требований к сборке.

Давай рассмотрим средних размеров сайт со стандартной структурой и попробуем перечислить основные этапы сборки, которые он проходит. Для простоты предположим, что ты не заморачиваешься с созданием разных JS-файлов для разных страниц, но при этом хочешь держать в девелопмент-окружении несколько небольших файлов, чтобы поддержать какую-никакую модульность. Обычно это выглядит как-то так:

/libs/ jquery.min.js underscore.min.js /js/ common.js carousel.js popups.js ....

Система сборки обычно делает следующее:

• конкатенирует все JS-файлы в один (в нужном порядке, мы же не хотим загрузить наши скрипты раньше, чем jQuery);
• проверяет JS-код на валидность (например, с помощью JSHint);
• минимизирует код, по необходимости его обфусцирует (то есть делает непонятным);
• конкатенирует CSS-файлы (порядок тут тоже важен, так как свойства часто переопределяются);
• минимизирует CSS;
• складывает файлики в отдельную директорию, из которой ты и подключаешь их в своем HTML.

Зачастую эта простая схема усложняется дополнительными требованиями: прогоняются тесты, компилируется код CSS-препроцессоров, оптимизируются картинки, компилируются шаблоны.

Все эти задачи, и даже больше, умеют решать современные инструменты сборки. Будем рассматривать самые популярные решения, которые работают на платформе Node.js. Общим их преимуществом является понятный язык, который знают (или считают, что знают) все фронтенд-разработчики, изначальная направленность на решение задач фронтенда, а также понятное Node.js окружение, в котором ты, может быть, уже разрабатываешь свое приложение.

Grunt

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

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

Во-вторых, Grunt разрабатывался как универсальный продукт, то есть на его основе можно решить практически любую задачу, связанную со сборкой проекта. Это круто, но за универсальность приходится платить. Как упоминавшейся многословностью, так и скоростью. В сравнении с другими системами сборки на Node.js Grunt заметно медленнее, и, что особенно неприятно, имеет тенденцию замедляться по мере роста проекта. Если не вдаваться в детали архитектуры Grunt, то причина кроется в том, что каждый раз, когда тебе нужно собрать, например, JS-файл, он пересобирает все JS-файлы. Можно постараться ускорить процесс сборки, прописав вручную необходимые связи между файлами, но на проекте со сложным деревом зависимостей файлов это может оказаться чрезмерно сложным.

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

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

Gulp

Gulp - активно развивающаяся в данный момент система сборки. В основе ее архитектуры лежит использование потоков в Node.js, что позволяет не записывать на диск временные файлы и папки. Основные достоинства Gulp - скорость и краткость конфига. Причем если первое бесспорно, то краткость по сравнению с Grunt достигается просто за счет другой его структуры. Если в конфиге Grunt ты по отдельности оперируешь плагинами, настраивая каждый из них, то в конфиге Gulp нужно описывать процесс, который должен пройти каждый файл (или набор файлов), чтобы быть собранным. Вот жизненный пример компиляции SASS:

Gulp.task("styles", function() { return gulp.src("styles/*.scss") .pipe(sass({ style: "expanded" })) .pipe(rename({suffix: ".min"})) .pipe(minifycss()) .pipe(gulp.dest("build/styles/css")); });

В первой строчке мы регистрируем задачу для Gulp с именем styles . Затем последовательно описываем, что же нужно сделать с каждым из файлов, подходящим под маску styles/*.scss: компилируем SASS, добавляем.min к имени файла, минимизируем, кладем в конечную директорию. Если с этим файлом понадобится делать что-то еще, мы просто добавим соответствующую команду, например.pipe(добавить комментарий с ASCII-единорогом в начало файла) (надеюсь, для этой повседневной задачи сделают наконец плагин). Мне такой подход к написанию конфига нравится больше: он лучше описывает, что же реально происходит с твоими файлами.

Конечно, пока Gulp проигрывает Grunt по количеству плагинов, но для множества задач плагины есть. Скорее всего, тебе хватит существующих плагинов, а если будет чего-то очень не хватать, всегда можно написать свой (шутка). Кстати, есть пакет gulp-grunt, который позволяет запускать задачи Grunt из Gulp, если прям очень надо.

Если тебе нравится подобный подход к сборке, важна скорость и не нужно выполнять специфические задачи, плагин для которых есть только для Grunt, то Gulp может стать отличным выбором. На настоящий момент Gulp остается самым серьезным конкурентом Grunt.

Broccolli

Самый молодой из рассматриваемых инструментов сборки, находится сейчас, по сути, в стадии разработки. Разработчики Broccolli не скрывают, что вдохновлялись Gulp, однако считают некоторые концепции, лежащие в его основе, ошибочными. Например, они выбрали кеширование всех промежуточных результатов сборки (причем реализуемое каждым из плагинов) для ее ускорения вместо частичной пересборки только требуемых файлов. Также им не понравилось, что Gulp лучше всего оперирует с трансформацией одного файла в один итоговый, то есть один к одному. Чтобы улучшить выполнение операций вида «много к одному», в данный момент Gulp разрабатывает сложную схему с созданием виртуальной файловой системы, что разработчикам Broccolli кажется лишним усложнением и проявлением слабости изначальных концепций Gulp. Broccolli изначально оперирует понятиями деревьев вместо файлов и совершает только трансформации деревьев в другие деревья (пусть даже вырожденные и из одной вершины).

Очень разумный теоретический подход к проблеме сборки не снимает проблемы количества расширений к Broccolli. К сожалению, их около двух десятков и выполняют они только самые базовые задачи. Если хочется попробовать что-то новое, посмотри на Broccolli, он достаточно быстр, активно разрабатывается, но, наверное, для применения на серьезных проектах еще сыроват.

Brunch

Brunch создавался с той же задачей - уделать Grunt по всем фронтам, но подошел к ней совсем с другой стороны. Разработчики Brunch решили взять хорошим пониманием предметной области, то есть сделать менее универсальный инструмент, который будет заточен именно под задачи фронтенда, например без всяких настроек понимать, что *.js - это файл со скриптами, *.coffee - CoffeeScript и так далее. Brunch довольно быстрый, гораздо быстрее Grunt, но чуть медленнее Gulp. К безусловным достоинствам Brunch стоит отнести также действительно компактный конфиг, меньше, чем у Grunt и Gulp, в разы. Вот, например, простой конфиг Brunch:

Exports.config = files: javascripts: joinTo: "javascripts/app.js": /^app/ "javascripts/vendor.js": /^(bower_components|vendor)/ stylesheets: joinTo: "stylesheets/app.css" order: after: ["vendor/styles/helpers.css"] templates: joinTo: "javascripts/app.js"

Заметь, что конфиг можно писать как на CoffeeScript (как в данном случае), так и на обычном JS. Мы создаем обычный модуль, который возвращает JSON с настройками сборки.

Обрати внимание на ключи joinTo и order. Это и есть знание предметной области, о котором я упоминал, - на уровне конфига Brunch знает, что ты, скорее всего, захочешь склеить файлы, причем некоторые раньше остальных. Именно это позволяет заменить 400 строк конфига Grunt на 20–30 строчек Brunch.

Плюс к этому экосистема Brunch гораздо меньше, чем у Grunt и даже чем у Gulp. Плагинов около 50 (сравни с 450+ у Gulp, например), развитие идет не очень быстро, в общем, здесь все довольно печально.

Подводя итог: если тебе очень нравятся короткие конфиги, важна скорость, но при это не нужны никакие особенные действия на этапе сборки, то можно посмотреть на Brunch. Смущает, конечно, небольшое количество плагинов, но, может быть, ситуация поменяется.

ENB

Ну и под конец самое сладкое. Хочу рассказать про систему сборки, разработанную в Яндексе Маратом Дулиным, которая называется ENB. Именно ее мы сейчас и используем на нашем проекте. Ее подход принципиально отличается от всех описанных систем: изначально она создавалась для работы с проектами, использующими BEM-методологию, хотя, как отмечает автор, ее платформа свободна от идеологии BEM и может быть использована для всех проектов подходящей структуры.

Вкратце, в чем суть. В ENB мы оперируем понятием цели, то есть конечного файла, который нужно собрать, или ноды (папки, в общем случае страницы), для которой нужно собрать некоторый набор файлов. Для того чтобы собрать целевой файл, мы используем некоторое количество технологий (грубо говоря, плагинов в терминах Grunt, хотя технологии меньше по размерам и более специализированы). Первым делом ENB определяет исходный набор файлов, которые нужны для сборки целей (этим занимаются несколько базовых технологий, по умолчанию работающие с методологией BEM, то есть они ищут *.bemdecl -файл, в котором прописаны зависимости данной ноды от разных блоков), полностью разворачивает это дерево зависимостей (когда блок, от которого зависит твоя страница, сам зависит от другого, подключаются оба в нужном порядке), а затем находит файлы, необходимые для каждой зарегистрированной технологии. Затем ENB придерживается описанной в конфиге последовательности трансформаций файлов (тут можно проследить некоторую аналогию с Gulp). Несмотря на некоторые отличия от стандартного подхода систем сборки, разобравшись с основными понятиями, дальше работать с ENB довольно легко.

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

К недостаткам можно отнести то, что конфиг ENB достаточно многословный, так как есть возможность управлять абсолютно всеми этапами сборки. Плюс ENB все-таки писался для BEM-методологии, и прикрутить его к проекту с совершенно другой структурой потребует лишних телодвижений. Для ENB не так много написанных технологий (порядка 60), но с большинством задач BEM-проектов он справляется на ура.

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

Приветствую. Если вы занимаетесь frontend разработкой, то могли заметить, что часто приходится выполнять одни и те же задачи. Было бы здорово все это автоматизировать и свести объем рутины к минимуму. В этом вам могут помочь таск-менеджеры и сборщики проектов, такие как Gulp и Grunt.

Gulp – это ответвление от проекта Grunt. От своего родителя он взял лучшие практики. Код инструкций пишется на JavaScript. Работает быстрее, чем Grunt в несколько раз.

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

• Создание веб-сервера для отладки
• Автоматическая перезагрузка страниц при внесении изменений (LiveReload)
• Слежение за изменениями в файлах проекта
• Использование препроцессоров HTML, CSS, JS
• Объединение файлов и их минификация
• Автоматическое создание вендорных префиксов для браузеров (Autoprefixer)
• Автоматизация управления файлами и директориями
• Запуск и контроль внешних команд операционной системы
• Запуск и контроль приложений
• Оптимизация изображений (сжатие, изменение размеров и т.д.)
• Выгрузка проекта на внешний сервер с помощью FTP, SFTP, Git и т.д.
• Подключение и использование дополнительных плагинов (сегодня их уже 3570 штук; решение можно
• найти практически для всех повседневных рутинных задач и не только)
• Автоматизация ручного труда

Установка

Для работы Gulp требуется Node.js. Скачать его можно на официальном сайте . Советую ставить LTS версию программной платформы. После инсталляции Node.js можно переходить к установке Gulp. Для этого откройте консоль операционной системы и выполните следующую команду:

Мы используем параметр -g , который позволяет установить Gulp глобально в операционной системе, без привязки к конкретному проекту.

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

Окей, пришло время создать проект, в котором мы будем использовать Gulp. Перейдите в директорию проекта и выполните команду:

Это запустит скрипт, который задаст вам несколько вопросов о проекте. В результате будет сконфигурирован файл для npm package.json . Это манифест проекта. Он содержит список пакетов, которые используются в проекте и другую информацию. На этом этапе я внес следующие данные, адаптируйте под свой проект.

name: (bybtc-landing) version: (1.0.0) description: Landing Page for byBTC entry point: (index.js) test command: git repository: https://github.com/Neuropassenger/bybtc-landing.git keywords: landing

Если какой-то вопрос хотите пропустить, то просто нажимайте Enter. Будет использовано значение по умолчанию. Теперь можно установить Gulp для нашего проекта. Выполните команду:

npm i --save-dev gulp

Gulp будет установлен в директорию проекта, а параметр –save-dev добавит его в зависимости package.json. Это позволит другому разработчику, открывшему ваш проект, быстро развернуть его на своей машине (с помощью команды npm i ).

Если все прошло хорошо, то в папке проекта должен появиться каталог node_modules . Он содержит установленный пакет gulp и все зависимости, необходимые для его работы.

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

Создаем две папки в корне проекта:

• /src/ – исходный код проекта во время разработки, здесь вы будете редактировать файлы
• /dist/ – файлы и папки проекта после сборки, готовый продукт

Каталог /dist/ будет заполняться автоматически при сборке проекта. Займемся пока что /src/ . Создайте внутри следующие папки:

• /css/ – для каскадных таблиц стилей
• /js/ – для JavaScript-сценариев
• /img/ – для изображений
• /fonts/ – для шрифтов
• /sass/ – для файлов препроцессора SASS (если используете SASS)
• /libs/ – для сторонних библиотек

Если все готово, то пора перейти к созданию файла gulpfile.js в корне проекта, который поможет настроить Gulp. Именно здесь вы можете создать инструкции Gulp, которые помогут автоматизировать часть рутинных задач.

Инструкции Gulp

Любая инструкция создается в gulpfile.js с помощью функции gulp.task() . Первый параметр – это название инструкции. Затем идет массив из названий инструкций, которые нужно выполнить до запуска определяемой инструкции. Последний параметр – это функция, тело которой определяет то, что делает данная инструкция.

gulp.task("название_инструкции", ["инструкция_выполняющаяся_перед_текущей", "еще_одна_инструкция"], function() { // Какие-то действия });

Для вызова инструкции необходимо использовать в консоли следующую команду:

gulp название_команды

Компиляция SASS в CSS

Начнем с компиляции SASS в CSS. Установим пакет gulp-sass:

npm i --save-dev gulp-sass

Сначала необходимо подключить используемые пакеты в gulpfile.js . Сделаем это:

var gulp = require("gulp"), sass = require("gulp-sass");

Теперь создадим инструкцию, которая будет выполнять компиляцию SASS в CSS:

gulp.task("sass", function() { return gulp.src("src/sass/**/*.sass") .pipe(sass()) .pipe(gulp.dest("src/css")); });

В первой строке инструкции указываем исходные файлы для компиляции. В конкретном примере будут взяты все файлы с расширением .sass , находящиеся внутри папки /src/sass/ и ее подпапках. Можно выбирать и конкретные файлы. Вот примерный список того, как вы можете задавать пути к исходным файлам.

• src/sass/main.sass – выбор файла main.sass
• src/sass/*.sass – выбор всех файлов с расширением sass
• src/sass/**/*.sass – выбор всех файлов с расширением sass во всех вложенных папках в папке sass
• !src/sass/main.sass – исключение файла main.sass
• [‘!src/sass/main.sass’, ‘src/sass/second.sass’] – исключение массива файлов main.sass и second.sass
• src/sass/**/*.+(scss|sass) – выбрать все файлы scss и sass во всех вложенных папках в sass

Теперь создаем в папке /src/sass/ файл main.sass и определим в нем немного стилей:

body color: red font-size: 20px

Сохраняем файл. Теперь мы можем проверить, как работает компиляция. В консоли выполняем команду:

Проверяем каталог /src/css/ . В нем должен находится только что скомпилированный CSS файл. Видите? Отлично! Двигаемся дальше.

Автообновление страниц (LiveReload)

Перейдем к автоматизации обновления страниц при их изменении, т.е. настроим LiveReload . Это одна из самых популярных задач, стоящих перед . Нам понадобится пакет npm Browsersync для автоматического обновления браузера. Установим его:

npm i --save-dev browser-sync

Подключим browser-sync пакет в начале gulpfile.js , как мы это делали ранее с пакетами gulp и gulp-sass :

browserSync = require("browser-sync");

Создадим инструкцию для запуска Browsersync:

gulp.task("browser-sync", function() { browserSync({ server: { baseDir: "src" } }); });

Все, что мы сделали – это вызвали запуск Browsersync и указали директорию проекта с исходными файлами. Есть и другие настройки для Browsersync . Можете узнать о них в документации.

Добавим еще один pipe к инструкции sass , с помощью которого будет происходить обновление стилей при компиляции CSS файлов. Указываем параметр stream: true . Это позволит обновлять стили потоково , без полной перезагрузки страницы.

Pipe(browserSync.reload({ stream: true; }))

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

gulp.task("watch", ["browser-sync"], function() { gulp.watch("src/sass/**/*.sass", ["sass"]); gulp.watch("src/js/**/*.js", browserSync.reload); gulp.watch("src/**/*.html", browserSync.reload); });

Поясню. Перед запуском выполняется инструкция browser-sync , т.е. стартует веб-сервер для отладки проекта. После этого выполняется сама инструкция watch . Для слежения за изменениями в файлах используем gulp.watch() .

Внутри анонимной функции мы выполняем 3 раза gulp.watch с двумя параметрами. Первый параметр – файлы, за которыми нужно следить, второй – действия, которые нужно выполнить при изменении файлов, т.е. выполнить инструкцию sass или обновить страницу.

Обратите внимание на первый gulp.watch . Вместо browserSync.reload мы передаем в массиве инструкцию sass , которую нужно выполнить, если файлы были изменены. В ней, как вы помните, мы потоково обновляем стили на странице.

Минификация и объединение файлов

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

• минифицировать (сжать) используемые библиотеки
• уменьшить количество запросов к серверу, объединив библиотеки в единый файл

Добавим в исходные файлы проекта несколько библиотек. Для этого я использую Bower , пакет для NPM . Установим Bower:

Создаем файл конфигурации .bowerrc в корне проекта для Bower, где укажем ему, куда сохранять библиотеки:

{ "directory": "src/libs/" }

Установим, для примера, библиотеку jQuery и слайдер slick :

bower i jquery slick-carousel

Теперь можем заняться конкатенацией и сжатием библиотек. Для этого будем использовать пакеты gulp-concat и gulp-uglifyjs касательно JavaScript-файлов. Установим их:

npm i --save-dev gulp-concat gulp-uglifyjs

Касательно CSS – пакет gulp-cssnano . Устанавливаем:

npm i --save-dev gulp-cssnano

Минифицированные файлы обычно имеют суффикс .min . Добавить его нам поможет пакет gulp-rename . Устанавливаем:

npm i --save-dev gulp-rename

Начнем с подключения установленных плагинов в gulpfile.js :

concat = require("gulp-concat"), uglifyJs = require("gulp-uglifyjs"), cssNano = require("gulp-cssnano"), rename = require("gulp-rename");

JavaScript

Создадим инструкцию, которая позволит нам сжимать и объединять JavaScript-файлы:

gulp.task("min-js", function() { return gulp.src([ "src/libs/jquery/dist/jquery.min.js", "src/libs/slick-carousel/dist/slick.min.js" ]) .pipe(concat("libs.min.js")) .pipe(uglifyJs()) .pipe(gulp.dest("src/js")); });

Внутри анонимной функции инструкции min-js мы сначала указываем пути на JavaScript-файлы библиотек в виде массива. Затем с помощью concat объединяем библиотеки в единый файл libs.min.js uglifyJs . И, наконец, сохраняем результат в папку /src/js/ .

Инструкцию можно проверить с помощью команды в консоли:

В папке /src/js/ появится файл libs.min.js , в котором объединены и сжаты используемые в проекте JavaScript-файлы библиотек.

CSS

Создадим в каталоге /src/css/ файл libs.sass . Будем в него импортировать CSS-файлы библиотек. Для примера с помощью Bower я скачал библиотеку Bootstrap :

bower i bootstrap

Откроем файл libs.sass и импортируем в него CSS-файл Bootstrap:

@import "src/libs/bootstrap/dist/css/bootstrap"

Таким образом, мы соберем все CSS-файлы библиотек в одном месте, а именно в файле libs.sass с помощью импорта. Теперь создадим инструкцию для сжатия:

gulp.task("min-css", ["sass"] , function() { return gulp.src("src/css/libs.css") .pipe(cssNano()) .pipe(rename({ suffix: ".min" })) .pipe(gulp.dest("src/css")); });

Перед сжатием мы компилируем CSS из SASS с помощью инструкции sass , которую мы указали в массиве после имени инструкции min-css .

В первой строке мы берем конкретный файл, libs.css . Далее сжимаем его с помощью cssNano . Затем с помощью rename добавляем суффикс .min . Результат сохраняем в папке /src/css/ .

Проверяем инструкцию:

Если вы все сделали правильно, то в папке /src/css/ должно появиться два файла. libs.css и libs.min.css . Сравните их размеры.

Автоматическое добавление вендорных префиксов (Autoprefixer)

При использовании свежих возможностей CSS необходимо расставлять вендорные префиксы для правильной работы стилей. Делать такие вещи вручную – неблагодарное занятие. Поэтому заставим Gulp это сделать за нас.

Для начала установим gulp-autoprefixer :

npm i --save-dev gulp-autoprefixer

Подключим установленный пакет в gulpfile.js :

autoprefixer = require("gulp-autoprefixer");

Окей, теперь мы можем использовать autoprefixer в инструкции sass . Сделаем это после вызова .pipe(sass()) , т.к. вендорные префиксы нужно расставить после того, как SASS будет преобразован в CSS. Добавим новый pipe :

Pipe(autoprefixer([ "last 10 versions" ], { cascade: true }))

Первым параметром autoprefixer мы передаем массив, в котором указываем, что хотим включить поддержку последних 10 версий браузеров. Второй параметр – это настройки, где мы указываем, что хотим видеть красивый код на выходе, т.е. включаем каскадность.

Проверяем, добавляя в main.sass новое свойство flex . Запускаем инструкцию sass :

В main.css должны появиться вендорные префиксы. Очень просто, все работает в автоматическом режиме. Замечательно!

Финальная сборка проекта

Последнее, чего хотелось бы коснуться в этом гайде для новичков по Gulp – это финальная сборка проекта. Для этого нам понадобится папка /dist/ , которую мы создали в самом начале. Перед каждой сборкой ее необходимо очищать. Для этого будем использовать пакет NPM del . Установим его:

npm i --save-dev del

Подключим пакет del в gulpfile.js :

del = require("del");

Создадим инструкцию clean для очистки каталога / dist/ перед сборкой:

gulp.task("clean", function() { return del.sync("dist"); });

Теперь можно заняться непосредственно сборкой проекта. Создадим инструкцию build :

gulp.task("build", ["clean", "min-css", "min-js"], function() { var buildCss = gulp.src([ "src/css/libs.min.css", "src/css/main.css" ]) .pipe(gulp.dest("dist/css")); var buildFonts = gulp.src("src/fonts/**/*") .pipe(gulp.dest("dist/fonts")); var buildJs = gulp.src("src/js/**/*") .pipe(gulp.dest("dist/js")); var buildHtml = gulp.src("src/*.html") .pipe(gulp.dest("dist")); });

Перед вызовом инструкции build мы очищаем папку /dist/ на тот случай, если сборка уже проводилась до этого. Затем сжимаем и объединяем JavaScript и CSS файлы с помощью инструкций min-js и min-css соответственно . Попутно компилируем SASS в CSS, т.к. перед выполнением инструкции min-css выполняется инструкция sass .

Внутри тела инструкции мы копируем подготовленные файлы проекта в каталог с готовым продуктом /dist/ . Проверяем работу инструкции:

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

Заключение

На этом закончу гайд для новичков по сборке проектов в Gulp. Как видите, все довольно просто. Со временем опубликую еще несколько постов, касающихся Gulp и его плагинов, как только сам хорошенько в них разберусь. А пока пользуйтесь и автоматизируйте свои рутинные задачи во frontend разработке согласно приведенной инструкции. Если появятся вопросы – задавайте в комментариях к посту.

{ "name": "bybtc-landing", "version": "1.0.0", "description": "Landing Page for byBTC", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "repository": { "type": "git", "url": "git+https://github.com/Neuropassenger/bybtc-landing.git" }, "keywords": [ "landing" ], "author": "Oleg Sokolov", "license": "ISC", "bugs": { "url": "https://github.com/Neuropassenger/bybtc-landing/issues" }, "homepage": "https://github.com/Neuropassenger/bybtc-landing#readme", "devDependencies": { "browser-sync": "^2.18.13", "del": "^3.0.0", "gulp": "^3.9.1", "gulp-autoprefixer": "^4.0.0", "gulp-concat": "^2.6.1", "gulp-cssnano": "^2.1.2", "gulp-rename": "^1.2.2", "gulp-sass": "^3.1.0", "gulp-uglifyjs": "^0.6.2" } }

var gulp = require("gulp"), sass = require("gulp-sass"), browserSync = require("browser-sync"), concat = require("gulp-concat"), uglifyJs = require("gulp-uglifyjs"), cssNano = require("gulp-cssnano"), rename = require("gulp-rename"), autoprefixer = require("gulp-autoprefixer"), del = require("del"); gulp.task("sass", function() { return gulp.src("src/sass/**/*.sass") .pipe(sass()) .pipe(autoprefixer([ "last 10 versions" ], { cascade: true })) .pipe(gulp.dest("src/css")) .pipe(browserSync.reload({ stream: true })); }); gulp.task("min-css", ["sass"] , function() { return gulp.src("src/css/libs.css") .pipe(cssNano()) .pipe(rename({ suffix: ".min" })) .pipe(gulp.dest("src/css")); }); gulp.task("min-js", function() { return gulp.src([ "src/libs/jquery/dist/jquery.min.js", "src/libs/slick-carousel/dist/slick.min.js" ]) .pipe(concat("libs.min.js")) .pipe(uglifyJs()) .pipe(gulp.dest("src/js")); }); gulp.task("browser-sync", function() { browserSync({ server: { baseDir: "src" } }); }); gulp.task("watch", ["browser-sync"], function() { gulp.watch("src/sass/**/*.sass", ["sass"]); gulp.watch("src/js/**/*.js", browserSync.reload); gulp.watch("src/**/*.html", browserSync.reload); }); gulp.task("clean", function() { return del.sync("dist"); }); gulp.task("build", ["clean", "min-css", "min-js"], function() { var buildCss = gulp.src([ "src/css/libs.min.css", "src/css/main.css" ]) .pipe(gulp.dest("dist/css")); var buildFonts = gulp.src("src/fonts/**/*") .pipe(gulp.dest("dist/fonts")); var buildJs = gulp.src("src/js/**/*") .pipe(gulp.dest("dist/js")); var buildHtml = gulp.src("src/*.html") .pipe(gulp.dest("dist")); });

В последнее время Gulp набирает большую популярность, и понятно почему. Он быстрее, красивее и проще чем Grunt . Мне приходилось часто с ним работать, но я всегда брал готовые решения и не до конца понимал как же он все это делает. На этих выходных я решил разобрать и закрыть эту небольшую проблему. Об этом и поговорим сегодня.

Что такое Gulp?

Gulp - это инструмент сборки front-a. Он позволяет автоматизировать повторяющиеся задачи (сборка и минификация CSS- и JS-файлов, запуск тестов, перезагрузка браузера и другие). Тем самым Gulp ускоряет и оптимизирует процесс веб-разработки.

Установка Gulp

Установить Gulp достаточно легко. Если у вас что-то не получится, пишите в комментариях или загуглите вашу проблему. Итак для установки нужно сделать 3 шага:

• Установить Gulp глобально
• Установить Gulp как devDependencies (зависимости для разработки)
• Создать файл gulpfile.js

Первый шаг - устанавливаем глобально Gulp. Открываем терминал и пишем:

npm install --global gulp

После этого вам нужно установить Gulp как devDependencies для вашего проекта. Убедитесь в том, что у вас есть файл package.json . Если его нет, то создайте его написав в консоль npm init . Теперь можно установить Gulp как devDependencies:

npm install --save-dev gulp

И наконец, вам нужно создать gulpfile.js в корне вашего проекта, который будет содержать ваши задачи (tasks). В качестве промежуточного шага, мы установим плагин gulp-util . Чтобы показать как устанавливаются плагины:

npm install --save-dev gulp-util

Теперь настало время написать нашу первую задачку. Открываем только что созданный файл gulpfile.js и пишем в него следующее:

/* File: gulpfile.js */ // собираем все наши плагины var gulp = require (" gulp " ), gutil = require (" gulp-util " ); // создаем задачку, которая будет выполняться по умолчанию gulp . task (" default " , function () { return gutil . log (" Gulp is running! " ) });

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

> gulp [ 12:32:08] Using gulpfile ~/Projects/gulp-scotch-io/gulpfile.js [ 12:32:08] Starting "default" ... [ 12:32:08] Gulp is running! [ 12:32:08] Finished "default" after 1 ms

Обзор

Сам по себе Gulp очень скуден на возможности. Но все, что вам нужно вынесено в отдельные плагины. Они совместно с Gulp творят чудеса.

Api у gulp очень маленькое, и содержит всего 4 функции высшего порядка:

• gulp.task
• gulp.src
• gulp.dest
• gulp.watch

gulp.task определяет наши задачи. В качестве аргументов принимает название, зависимости (массив) и функцию (основные действия). Зависимостей может и не быть:

gulp . task (" mytask " , function () { //сделать что-то }); gulp . task (" dependenttask " , [ " mytask " ], function () { //сделать что-то после того, как "mytask" будет выполнен });

gulp.src указывает на файлы, которые мы хотим использовать. Он использует.pipe доступа к файлам через плагины.

gulp.dest указывает на папку, в которую мы хотим сохранить измененные файлы.

gulp.src и gulp.dest используется для простой копии файлов:

gulp . task (" copyHtml " , function () { // скопировать все html файлы из source/ в public/ gulp . src (" source/*.html " ). pipe (gulp . dest (" public " )); });

В gulp встроена система реагирования на изменения файлов (gulp.watch). Вы можете использовать эту задачу для запуска других необходимых вам задач при изменении файлов.

Сжатие изображение, JS и CSS файлов, в целях оптимизации загрузки веб-страниц и многоe многое другое. Чтобы упросить этот процесс, мы предлагаем вам воспользоваться сборкой проектов Gulp 4, которую постоянно совершенствует Андрей Горохов. Ниже будут представлены ссылки на скачивание, а пока пройдемся по основным моментам: описанию и установке.

Сборщик проектов Gulp

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

Скачать сборку можно с репозитория Github или через командную строку Git . В дальнейшем вы сможете настроить её под свои задачи.

Особенности

• именование классов по БЭМ
• используется БЭМ-структура
• используется препроцессор SCSS
• используется транспайлер Babel для поддержки современного JavaScript (ES6) в браузерах
• используется Webpack для сборки JavaScript-модулей
• используется CSS-сетка smart-grid на основе Bootstrap для быстрой адаптивной вёрстки
• используется жёсткий кодгайд

Установка

• установите NodeJS (если требуется) и Yarn
• скачайте сборку с помощью Git : git clone https://github.com/andreyalexeich/gulp-scss-starter.git
• установите gulp глобально: yarn global add gulp-cli
• перейдите в скачанную папку со сборкой: cd gulp-scss-starter
• скачайте необходимые зависимости: yarn
• чтобы начать работу, введите команду: yarn run dev (режим разработки)
• чтобы собрать проект, введите команду yarn run build (режим сборки)

Если вы всё сделали правильно, у вас должен открыться браузер с локальным сервером. Режим сборки предполагает оптимизацию проекта: сжатие изображений, минифицирование CSS и JS-файлов для загрузки на сервер.

Если у тебя возникли проблемы с установкой, то посмотри этот ролик:

Файловая структура

gulp-scss-starter ├── dist ├── gulp-tasks ├── src │ ├── blocks │ ├── fonts │ ├── img │ ├── js │ ├── styles │ ├── views │ └── .htaccess ├── gulpfile.babel.js ├── webpack.config.js ├── package.json ├── .babelrc.js ├── .bemrc.js ├── .eslintrc.json ├── .stylelintrc ├── .stylelintignore └── .gitignore

• Корень папки:
  • .babelrc.js - настройки Babel
  • .bemrc.js - настройки БЭМ
  • .eslintrc.json - настройки ESLint
  • .gitignore – запрет на отслеживание файлов Git’ом
  • .stylelintrc - настройки Stylelint
  • .stylelintignore – запрет на отслеживание файлов Stylelint’ом
  • gulpfile.babel.js - настройки Gulp
  • webpack.config.js - настройки Webpack
  • package.json - список зависимостей
• Папка src — используется во время разработки:
  • БЭМ-блоки: src/blocks
  • шрифты: src/fonts
  • изображения: src/img
  • JS-файлы: src/js
  • страницы сайта: src/views/pages
  • SCSS-файлы: src/styles
  • HTML-файлы: src/views
  • конфигурационный файл веб-сервера Apache с настройками gzip (сжатие без потерь): src/.htaccess
• Папка dist — папка, из которой запускается локальный сервер для разработки (при запуске yarn run dev)
• Папка gulp-tasks — папка с Gulp-тасками

Команды

• yarn run lint:style — проверить SCSS-файлы. Для VSCode необходимо установить плагин . Для WebStorm или PHPStorm необходимо включить Stylelint в Languages & Frameworks - Style Sheets - Stylelint (ошибки будут исправлены автоматически при сохранении файла)
• yarn run lint:style --fix — исправить ошибки в SCSS-файлах
• yarn run dev — запуск сервера для разработки проекта
• yarn run build — собрать проект с оптимизацией без запуска сервера
• yarn run build views — скомпилировать Pug-файлы
• yarn run build styles — скомпилировать SCSS-файлы
• yarn run build scripts — собрать JS-файлы
• yarn run build images — собрать изображения
• yarn run build webp — сконвертировать изображения в формат.webp
• yarn run build sprites — собрать спрайты
• yarn run build fonts — собрать шрифты
• yarn run build favicons — собрать фавиконки
• yarn run build gzip — собрать конфигурацию Apache

Компонентный подход к разработке сайтов

• аждый БЭМ-блок имеет свою папку внутри src/blocks/modules
• папка одного БЭМ-блока содержит в себе один HTML-файл, один SCSS-файл и один JS-файл (если у блока используется скрипт)
  • HTML-файл блока импортируется в файл src/views/index.html (или в необходимый файл страницы, откуда будет вызываться блок)
  • SCSS-файл блока импортируется в файл src/blocks/modules/_modules.scss
  • JS-файл блока импортируется в src/js/import/modules.js

Пример структуры папки с БЭМ-блоком:

Blocks ├── modules │ ├──header │ │ ├── header.html │ │ ├── header.js │ │ ├── header.scss

Чтобы вручную не создавать соответствующие папку и файлы, достаточно в консоли прописать команду bem create my-block — для создания папки БЭМ-блока, где my-block — имя БЭМ-блока

Страницы проекта

• страницы проекта находятся в папке src/views/pages
  • главная страница: src/views/index.html

Шрифты

• шрифты находятся в папке src/fonts
  • используйте форматы .woff и.woff2
  • шрифты подключаются в файл src/styles/base/_fonts.scss
  • сконвертировать локальные шрифты можно с помощью данного сервиса

Изображения

• изображения находятся в папке src/img
  • изображение для генерации фавиконок должно находиться в папке src/img/favicon и иметь размер не менее 1024px x 1024px
  • изображения автоматически конвертируются в формат.webp . Подробная информация по использованию .

Сторонние библиотеки

• все сторонние библиотеки устанавливаются в папку node_modules
  • для их загрузки воспользуйтеcь командой yarn add package_name
  • для подключения JS-файлов библиотек импортируйте их в самом начале JS-файла БЭМ-блока (то есть тот БЭМ-блок, который использует скрипт), например:

  Import $ from " jquery" ;

  • для подключения стилевых файлов библиотек импортируйте их в файл src/styles/vendor/_libs.scss
  • JS-файлы и стилевые файлы библиотек самостоятельно изменять нельзя

⚠️ Если в вашем проекте используется несколько библиотек, которые необходимо подключать на нескольких страницах, во избежании ошибок нужно:

• по пути src/js/import создать папку pages
• в папке pages создать js-файл для страницы, например, pageA.js , и импортировать туда библиотеку, которая будет использоваться только на этой странице
  • аналогично проделать шаг для дополнительных страниц
• в файле webpack.config.js в точку входа добавить js-файлы страниц, пример:

Entry: { main: " ./src/js/index.js" , pageA: " ./src/js/import/pages/pageA.js" , pageB: " ./src/js/import/pages/pageB.js" }

• подключить скомпилированные js-файлы на необходимых страницах

CSS-сетка smart-grid

В сборщик включена CSS-сетка smart-grid от Дмитрия Лаврика . Она позволяет избавиться от лишних классов в разметке за счёт использования примесей в SCSS и ускоряет адаптивную вёрстку. Конфигурация уже настроена в соответствии с сеткой Bootstrap . Пример использования:

Items { @include row-flex (); @include md (justify-content , center ); .item { @include col (); @include size (3 ); @include size-md (5 ); @include size-xs (10 ); } }