Написать нам
Категория: Кодирование
01.12.2019

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

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


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


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


npm i gulp –g


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


npm i gulp --save-dev С установкой разобрались, а если не всё понятно, то для более конкретных инструкций всегда есть официальная документация. Давайте перейдем к настройке. Для примера возьмем два каталога: 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, использования препроцессоров, расстановка префиксов. Кроме этого в список умений данного таск-менеджера входит:



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

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

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

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


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


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


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


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


Написать нам
Имя*:
Email*:
Сообщение: