Gulp — автоматизируй сборку и минификацию своего проекта

gulp_logo-1450648879924

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

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

Gulp — таск-менеджер на JavaScript, работа которого производится средствами NodeJs, пришедший на замену прошлому такс-менеджеру Grunt.

Что такое таск-менеджер Gulp?

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

Потоковая передача данных Gulp

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

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

Плагины Gulp

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

Пиши код, а не занимайся настройками с Gulp

Мне лично больше всего по душе то, что gulpfile — это прежде всего код, а не файл с настройками. Gulp следует спецификации CommonJS, и если вы знакомы с Node, у вас не возникнет никаких проблем. Gulpfile выглядит аккуратно и читаемо, благодаря тому, что код уже структурирован известным вам способом. Его написание не должно вызвать у вас существенных затруднений.

Примеры

Всё это трудно осмыслить без примеров кода, так что я продемонстрирую вам два таких примера. Ниже мы создадим gruntfile и gulpfile. Оба будут делать линтинг, конкатенацию и минификацию js-файлов в нашем проекте. Также, оба таск-менеджера должны отслеживать изменения в файлах проекта, и запускать связанные с этими файлами задачи повторно.

Начнем с gruntfile, а затем я покажу вам, как те же самые настройки выглядит в gulpfile. Это поможет вам наглядно понять, как работают оба таск-менеджера, и как именно gulp использовал и развил идеи Grunt.

Используя gulp, мы уменьшили количество строк в нашем коде с 52 до 30. Вы должны были заметить, что хотя нам и потребовалось одинаковое количество плагинов, два из них различаются, несмотря на то, что мы выполняем совершенно одинаковую задачу в первом и во втором примерах. Это так же наглядно демонстрирует различие в подходах к плагинам, о котором я писал выше.

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

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

Вывод

В конечном счете, всё сводится к личным предпочтениям: лично я предпочитаю «node-подобный» путь в написании моих таск-файлов с gulp. И, всё же, я должен сказать, что я искренне рад тому времени, которое я провел с Grunt. Я так же хотел бы отметить, что очень важно не просто понимать, как устроены оба таск-менеджера, но и осознавать, какие именно решения и почему были приняты разработчиками за основу этих инструментов. Такой подход поможет вам узнать много нового, и сэкономит вам в дальнейшем массу времени в разработке. Что ж, если вы готовы начать — вперед, на GitHub за gulp.

Статья бережно перепечатана у Frontender.info