Каждый разработчик вынужден делать рутинные и монотонные задачи, так уж сложилось, излишки профессии. Но что, если часть этих задач можно автоматизировать? В этом деле поможет таск-менеджер. Один из самых популярнх является Gulp. Простейшее определение говорит, что Gulp - это менеджер задач/сборщик проектов, который разработан на языке JavaScript, с помощью которого можно автоматизировать различные таски, значительно экономя при этом время.
Как использовать Gulp в своем проекте и что именно подлежит автоматизации - это мы сегодня и рассмотрим. Следуя простым инструкциям из документации, первым делом видим, что для работы Gulp нужно чтобы на вашем компьютере был установлен Node.js. Далее следует глобальная установка модуля, чтобы им можно было пользоваться в любомом месте на вашем ПК. Для этого выполним следующий код в командной строке:
npm i gulp –g
После этого нужно установить и добавить его в свой проект, предварительно сменив каталог, на необходимый и использовать следующую команду:
npm i gulp --save-dev
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 обработал наши файлы и сделал следующее:
Как результат - имеем 6 пунктов, которые каждый хоть раз выполнял собственноручно, и это только на примере одной небольшой задачи веб-разработки.
Именно краткость синтаксиса и гибкость настройки Gulp’а делают его тем инструментом, благодаря которому каждый разработчик сможет сэкономить уйму времени. Мы плавно подошли к тому, какие именно процессы помогает автоматизировать Gulp. В примере выше описан процесс минимизации CSS, использования препроцессоров, расстановка префиксов. Кроме этого в список умений данного таск-менеджера входит:
Tакже существует множество других полезных плагинов. К примеру gulp-connect позволяет создавать и запускать локальный сервер с поддержкой livereload. С помощью этого плагина можно видеть изменения в браузере, сразу же после того, как вы обновили ваш sass, html или js файл без многочисленных нажатий по кнопке “обновить”.
Ещё одной особенностью Gulp является то, что помимо автоматизации процесса разработки с помощью создания различных задач, он может автоматизировать процесс работы этих самых задач и просто незаменим в процессе веб-дизайна 2020!
Ведь если взять пример нашей таски выше, то для её выполнения следует каждый раз набирать команду в строке/ Здесь на помощь приходит метод Watch, который следит за состоянием файлов и выполняет конкретные задачи снова и снова в зависимости от того, есть ли изменения в тех или иных файлах. Представим пример кода, где используется данный метод в следующем виде: