Как Использовать 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 является то, что помимо автоматизации процесса разработки с помощью создания различных задач, он может автоматизировать процесс работы этих самых задач и просто незаменим в процессе веб-дизайна 2019! 

Ведь если взять пример нашей таски выше, то для её выполнения следует каждый раз набирать команду в строке/ Здесь на помощь приходит метод 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 - это идеальное решение. Думаю, что для ваших тоже. Крайне рекомендую к использованию данный таск-менеджер, с помощью которого рутинные задачи не станут такой тягостью в процессе разработки. Автоматизация и время, сэкономленное благодаря ей - превыше всего. Так что устанавливайте Gulp, знакомьтесь с множеством полезных плагинов и создавайте персональные задачи, в зависимости от ваших потребностей.

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


Спасибо!