Введение в автоматизацию JavaScript с помощью Gulp

Как веб-разработчики, мы иногда снова и снова повторяем одни и те же утомительные задачи. Если вы подумаете, сколько времени тратится впустую, запуская команду сборки или нажимая кнопку «Обновить» в браузере, вы поймете, что можете сэкономить много времени. Кроме того, автоматизировав свои процессы, вы можете сосредоточиться на текущей задаче, а не временно покидать «зону» (ваше состояние продуктивности).

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

Gulp – это система сборки, которая использует потоки Node.js для реализации асинхронного подхода к автоматизации "источник-назначение". Все написано на JavaScript, поэтому любой, кто имеет промежуточные знания в области кодирования, может легко начать работу. Процесс сборки Gulp состоит из набора наблюдателей и задач. Кроме того, сообщество Gulp поддерживает огромный каталог плагинов в npm, который помогает решать любые задачи, от объединения JavaScript до создания иконочных шрифтов из SVG.

Альтернативы глотку

Существует множество альтернатив, большинство из которых появилось за последние пару лет, наиболее заметной из которых является Grunt. В состязании между Gulp и Grunt никогда не будет явного победителя, поскольку у обоих есть свои плюсы и минусы, поэтому я не буду вдаваться в подробности. В двух словах, сильная зависимость Grunt от конфигурации — это то, что подталкивает людей к подходу Gulp к JavaScript. Тем временем нативные реализации графического интерфейса, такие как Koala, получили некоторое распространение, в основном благодаря людям, которые воздерживаются от программирования. Однако с помощью связанных приложений невозможно достичь того уровня настраиваемости и расширяемости, который предлагает Gulp.

Основы автоматизации процессов

Плагины

Плагины — это средства, с помощью которых gulp выполняет каждый процесс. Плагины устанавливаются через npm и запускаются с помощью «require».

Задачи

Для Gulp у задач всегда есть источник и место назначения. Между ними лежат каналы, которые вызывают каждый плагин и выводят преобразованные результаты в следующий канал.

шары

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

Наблюдатели

Наблюдатели наблюдают за изменениями в исходных файлах и вызывают задачи при обнаружении изменений.

gulpfile.js

Это файл JavaScript, на который указывает команда gulp. Он содержит все, от задач до наблюдателей или других фрагментов кода, используемых задачами.

Простая задача

Для начала вам потребуется Node.js и оболочка командной строки с правами администратора. Вы можете скачать Node.js отсюда. После установки вы можете запустить следующую команду, чтобы убедиться, что npm обновлен.

 sudo npm install npm -g

Флаг -g указывает, что установка будет глобальной.

Теперь вы готовы установить Gulp и начать вызывать несколько простых задач. Используйте следующую команду для глобальной установки Gulp.

 sudo npm install gulp -g

Обратите внимание, что вы также можете использовать ту же команду для обновления.

Вы можете скачать стартовый набор, который поможет вам с первой задачей, на сайте toptal-gulp-tutorial/step1. Он включает в себя очень простую задачу, которая компилирует файлы SCSS в CSS. Он использует плагин gulp-sass, в котором используется libsass. Я выбрал libsass здесь, потому что он намного быстрее, чем альтернатива Ruby, хотя ему не хватает некоторых функций. Оказавшись в корневом каталоге вашего проекта, вы можете использовать следующую команду для установки всех необходимых плагинов.

 npm install

Эта команда читает файл package.json и устанавливает все необходимые зависимости. Мы используем «npm install» здесь как сокращение для следующего:

 npm install gulp --save-dev npm install gulp-sass --save-dev

Флаг «–save-dev» добавляет выбранные плагины в package.json devDependencies, чтобы в следующий раз, когда вы захотите установить все, вы могли использовать удобную «установку npm».

На этом этапе вы можете запустить свою первую задачу. Выполните следующую команду и посмотрите, как все файлы SCSS в папке /scss скомпилированы в CSS в соответствующем каталоге:

 gulp scss

Обратите внимание, что в этом примере мы указываем задачу для запуска. Если бы мы опустили имя задачи, была бы запущена задача с именем «по умолчанию».

Пошаговое руководство по коду

Вышеупомянутое достигается всего за 7 строк кода JavaScript. Конечно, вы почувствуете себя как дома, когда поймете его простоту:

 var gulp = require('gulp'); var scss = require('gulp-sass');

В начале мы инициализируем все плагины, которые будем использовать. Gulp — единственный, без которого мы не можем обойтись:

 gulp.task('scss', function() {

Мы определяем задачу с именем «scss»:

 return gulp.src('scss/*.scss')

Задайте исходные файлы для задачи. Они определяются как шары. В этом примере мы имеем в виду все файлы в папке «scss/», которые заканчиваются на «.scss».

 .pipe(scss())

На этом этапе мы вызываем плагин gulp-sass, который мы определили ранее:

 .pipe(gulp.dest('css'));

Наконец, мы используем «gulp.dest», чтобы определить папку назначения для наших файлов. Это также может быть одно имя файла, если файлы были объединены.

Чтобы еще больше улучшить эту реализацию автоматизации процесса, вы можете попробовать включить несколько других плагинов Gulp. Например, вы можете минимизировать конечный продукт своей задачи с помощью gulp-minify-css и автоматически добавлять префиксы поставщиков с помощью gulp-autoprefixer.

Использование Наблюдателя

Я создал стартовый набор наблюдателей, которым вы можете сразу же воспользоваться. Вы можете скачать его с сайта toptal-gulp-tutorial/step2. Он включает в себя расширенную версию ранее созданной задачи SCSS и наблюдатель, который просматривает исходные файлы и вызывает задачу. Для того, чтобы запустить его, используйте следующую команду:

 gulp

Эта команда запускает задачу «по умолчанию», которая инициирует наблюдатель. На этом этапе вы можете отредактировать любой из файлов SCSS и посмотреть, как файлы CSS будут перекомпилированы. Вы сможете видеть уведомления Gulp в командной строке.

Пошаговое руководство по коду

Мы настроили наблюдателя для нашей задачи всего с 3 дополнительными строками кода. Тем не менее, стартовый комплект наблюдателя не сильно отличается от вводного примера. В этом разделе мы пройдемся по всем дополнениям и изменениям.

 return gulp.src(['scss/**/*.scss', '!scss/**/_*'])

В этом примере источник Gulp предоставляется с массивом глобусов. Первый включает в себя все файлы, которые заканчиваются на «.scss», а также во вложенных папках, а второй исключает те, которые начинаются с «_». Таким образом, мы можем использовать встроенную функцию SCSS @import для объединения файла _page.scss.

 gulp.task('default', ['scss'], function() {

Здесь мы определяем задачу «по умолчанию». Задача «scss» запускается как зависимость перед «по умолчанию».

 gulp.watch('scss/**/*.scss', ['scss']);

Наконец, мы вызываем функцию наблюдения Gulp, чтобы указать на любой файл, оканчивающийся на «.scss», и всякий раз, когда происходит событие изменения, запускать задачу «scss».

Теперь вы готовы создавать новые наблюдатели для других автоматизированных процессов, таких как конкатенация JavaScript, подсказки кода, компиляция CoffeeScript или что-то еще, что может прийти в голову. Чтобы углубиться в эту реализацию автоматизации JavaScript, я предлагаю добавить gulp-notify, который будет уведомлять вас о запуске задачи. Кроме того, вы можете создать отдельную задачу для минимизации результирующего кода CSS и запустить задачу «scss» как зависимость от нее. Наконец, вы можете использовать gulp-rename для добавления суффикса «.min» к результирующим файлам.

Расширенные плагины Gulp для автоматизации JavaScript

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

BrowserSync

BrowserSync внедряет CSS, JavaScript и автоматически обновляет браузер при каждом изменении. Кроме того, он содержит функцию ghostMode, которую можно использовать, чтобы напугать ваших коллег или значительно ускорить тестирование вашего браузера.

Просматривать

Browserify анализирует вызовы «require» в вашем приложении и преобразует их в связанный файл JavaScript. Также есть список пакетов npm, которые можно преобразовать в код браузера.

Вебпак

Подобно Browserify, Webpack стремится преобразовать модули с зависимостями в статические файлы. Это дает пользователю больше свободы в отношении того, как будут устанавливаться зависимости модуля, и не стремится следовать стилю кода Node.js.

Карма

Gulp-karma привносит печально известную среду тестирования в Gulp. Karma следует подходу с минимальной конфигурацией, который также поддерживает Gulp.

Заключение

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

Следите за более продвинутым руководством по Gulp, которое появится в ближайшее время.