Как Использовать Gulp: Автоматизация Процессов Верстки с Помощью Gulp

Каждый разработчик вынужден делать рутинные и монотонные задачи, так уж сложилось, излишки профессии. Но что, если часть этих задач можно...

#1. Как использовать Gulp
#2. Преимущества Gulp
#3. Вывод

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

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

Как использовать Gulp

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

npm i gulp –g

После этого нужно установить и добавить его в свой проект, предварительно сменив каталог, на необходимый и использовать следующую команду:

npm i gulp --save-dev

How to Use Gulp

С установкой разобрались, а если не всё понятно, то для более конкретных инструкций всегда есть официальная документация. Давайте перейдем к настройке. Для примера возьмем два каталога: merehead/first-catalog и merehead/secondary-catalog.

В каталоге merehead/first-catalog будут находится исходные файлы, а в каталоге merehead/secondary-catalog - файлы, после обработки Gulp’ом. Базовый синтаксис какой-либо задачи можно представить в таком виде:

gulp.task(‘example’, function() { });

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

npm install yourPlaginNameHere --save-dev

Далее создадим файл настроек для таск-менеджера, который назовем “gulpfile.js” и пропишем в нем следующее:

var yourPlaginNameHere= require('yourPlaginNameHere'); //Connection of a plugin.

И создадим нашу первую задачу, в которую включены плагины SASS, autoprefixer, css-min и rename.

gulp.task('yourPlaginNameHere', function () { gulp.src('./merehead/first-catalog/app-style/*.scss') .pipe(sass()) .pipe(autoprefixer()) .pipe(cssmin()) .pipe(rename({suffix: '.min'})) .pipe(gulp.dest('./mereheadt/secondary-catalog/app-style')); });

В итоге, вместо нас Gulp обработал наши файлы и сделал следующее:

1) Прошелся по всем файлам стилей с расширением .scss

2) Преобразовал Sass в CSS

3) Поставил все необходимые вендорные префиксы в CSS

4) Минимизировал CSS

5) Переименовал файлы, добавив суффикс min

6) Положил обработанные файлы в папку secondary-catalog/app-css

Как результат - имеем 6 пунктов, которые каждый хоть раз выполнял собственноручно, и это только на примере одной небольшой задачи. Именно краткость синтаксиса и гибкость настройки Gulp’а делают его тем инструментом, благодаря которому каждый разработчик сможет сэкономить уйму времени.

Мы плавно подошли к тому, какие именно процессы помогает автоматизировать Gulp. В примере выше описан процесс минимизации CSS, использования препроцессоров, расстановка префиксов. Кроме этого в список умений данного таск-менеджера входит:

- Оптимизация изображений

- Использование HTML-шаблонизаторов, типа Jade

- Тестирование кода и его валидация

- Минимизация и объединение JavaScript.

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

TТакже существует множество других полезных плагинов. К примеру gulp-connect позволяет создавать и запускать локальный сервер с поддержкой livereload. С помощью этого плагина можно видеть изменения в браузере, сразу же после того, как вы обновили ваш sass, html или js файл без многочисленных нажатий по кнопке “обновить”.

Ещё одной особенностью Gulp является то, что помимо автоматизации процесса разработки с помощью создания различных задач, он может автоматизировать процесс работы этих самых задач! Ведь если взять пример нашей таски выше, то для её выполнения следует каждый раз набирать команду в строке/

Здесь на помощь приходит метод Watch, который следит за состоянием файлов и выполняет конкретные задачи снова и снова в зависимости от того, есть ли изменения в тех или иных файлах. Представим пример кода, где используется данный метод в следующем виде:

gulp.task('myWatcher', ['yourTaskNameHere'], function() { gulp.watch ('./merehead/first-catalog/app-style/*.scss', ['yourTaskNameHere']); }); gulp.task('default', ['myWatcher']);

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

В самом начале я говорил, что Gulp - это ещё и сборщик проектов. Но, в роли сборщика его удобно использовать только на небольшом проекте. Когда ваш проект использует React, Redux и множество различных плагинов - гораздо удобнее воспользоваться Webpack’ом. Именно так мы и работаем в нашей компании: на этапе создания макета или на небольших проектах я использую Gulp, а для полноценных веб-приложений другие разработчики нашей компании используют Webpack.

Вывод

В заключении хочу сказать, что для моих целей Gulp - это идеальное решение. Думаю, что для ваших тоже. Крайне рекомендую к использованию данный таск-менеджер, с помощью которого рутинные задачи не станут такой тягостью в процессе разработки. Автоматизация и время, сэкономленное благодаря ей - превыше всего. Так что устанавливайте Gulp, знакомьтесь с множеством полезных плагинов и создавайте персональные задачи, в зависимости от ваших потребностей.

Оцените (3 голосов - 5 из 5)
Спасибо!
1
(Ужасно)
2
(Плохо)
3
(Средне)
4
(Хорошо)
5
(Класс!)


Спасибо!
Ok