Что такое GULP?
Вы устали делать одно и то же снова и снова при разработке приложения? Когда я был новичком в JavaScript-фреймворках, самое раздражающее, что мне приходилось делать, - это перезагружать сервер снова и снова после внесения изменений. Позже я, кстати, нашел «Nodemon»;)
Что ж, Gulp - решение для этого. Не только для этого. Gulp решает проблему повторения. Большинство задач, которые разработчикам приходится выполнять снова и снова, можно упростить с помощью Gulp, сделав их автоматизированными. Таким образом, Gulp можно рассматривать как средство выполнения задач JavaScript, которое позволяет разработчику автоматизировать определенные задачи.
GULP - это набор инструментов для автоматизации болезненных или трудоемких задач в рабочем процессе разработки.
Примеры задач:
- Обновлять браузер при изменении файлов
- Минимизировать JavaScript
- Компилировать SASS / LESS в CSS
- Модульные тесты
- Разверните исходный код в выходной каталог (например, папку dist)
Gulp очень легко освоить, и с ним весело работать. Вам необходимо знать 4 основные функции Gulp API.
- gulp.task - используется для определения новой задачи gulp.
- gulp.src - указывает, где находятся входные файлы задачи.
- gulp.dest - указывает, куда нужно записать выходные файлы.
- gulp.watch - используется для того, чтобы заставить gulp следить за изменениями файлов.
Не запутайтесь в этом. Я проведу вас через всех и каждого, и в конце вы поймете их полностью.
Еще вам нужно понять, что такое pipe в Gulp. Бывают моменты, когда вам нужно сделать несколько дел в одной задаче. Например, вам может потребоваться объединить несколько файлов JavaScript в один файл и минимизировать его. В такого рода сценариях пригодятся трубы. Используя каналы, вы можете объединить несколько задач в цепочку, используя потоки. В приведенном выше примере вам нужно будет связать конкатенацию и минимизацию. Они станут более понятными, когда вы с ними поиграете.
Давайте поработаем над простыми примерами, чтобы понять, как работает Gulp.
Простой пример с GULP
1. Настройка среды
Прежде всего, вам необходимо установить node.js на свой компьютер, а если у вас его нет, установите его отсюда.
Эти примеры будут полностью кроссплатформенными, и вам не нужно беспокоиться о своей платформе.
Когда вы будете готовы, установите Gulp глобально, используя команду
Затем инициализируйте проект узла, выполнив обычную команду npm init.
Перейдите в каталог вашего проекта и установите gulp локально в качестве зависимости разработки.
2. Ваша первая задача в GULP
Теперь создайте gulpfile.js на корневом уровне вашего проекта. Все задачи, которые нам нужно запустить, будут включены в этот файл.
Обратите внимание, что это имя «gulpfile.js» важно, поскольку оно используется для обнаружения файла. В противном случае вы получите сообщение об ошибке, указывающее, что файл gulpfile не найден.
Теперь давайте создадим нашу первую задачу gulp. В этой задаче мы просто сделаем консольный журнал.
Здесь все должно быть ясно, если вы знакомы с node.js, потому что он не требует пояснений. Сначала мы импортируем gulp, и, поскольку мы создаем новую задачу, используется функция gulp.task. Здесь нам нужно передать 2 параметра. Сначала имя задачи, а затем функция, определяющая задачу, включая то, что должно быть выполнено.
Чтобы выполнить задачу, запустите в терминале gulp console. Имя задачи, которую необходимо выполнить, должно следовать после gulp в команде.
Если имя вашей задачи «по умолчанию», вы можете запустить ее, просто выполнив gulp в терминале. Это называется выполнением задачи по умолчанию в gulp.
3. Копирование исходных файлов в папку вывода
А теперь займемся более полезной работой. Перед развертыванием приложения на сервере нам нужно скопировать все в выходной каталог.
Давайте создадим каталог src и добавим туда базовый HTML-файл. Перед развертыванием нашего очень простого приложения нам нужно скопировать его в папку dist. Давай сделаем это залпом.
В этой новой задаче нам нужно указать gulp, где находятся входные файлы и куда их копировать. Для этого мы используем gulp.src и gulp.dest. Здесь мы указываем все файлы HTML в каталоге src.
Обратите внимание, что здесь мы используем канал, поскольку мы имеем дело с чтением из источника ввода и записью в место назначения.
Запустите задачу так же, как мы делали ранее, используя команду gulp copyToDist. Вы заметите, что будет создана папка dist, содержащая HTML-файл, который находился в каталоге src.
4. Уменьшение файлов JavaScript.
При уменьшении файла JavaScript все пробелы будут удалены, включая комментарии, чтобы сделать файл более легким.
Для этого нам нужно установить другую зависимость, называемую «gulp-uglify». Сначала установите его с помощью следующей команды.
Затем создайте каталог js в каталоге src и добавьте файл JavaScript, содержащий некоторые команды журнала консоли, разделенные пробелами и несколькими комментариями. Теперь давайте уменьшим это и добавим в каталог dist в js.
Здесь все должно быть понятно. Функция uglify () происходит от нашей новой зависимости. Вы увидите, что новый файл JavaScript в каталоге dist уменьшен путем удаления всех пробелов и комментариев.
5. Скомпилируйте SASS в CSS.
SASS позволяет использовать функции, которых еще нет в CSS, такие как переменные, вложение, наследование и т. д. Мы можем скомпилировать SASS в CSS с помощью gulp, установив другую зависимость, как мы сделали в предыдущей задаче.
На этот раз это глоток-нахальство. Сначала установите его с помощью следующей команды.
Как и раньше, создайте каталог sass в каталоге src, содержащий файл sass. Давайте скомпилируем его и добавим в каталог css в dist.
Понимаете, здесь нет ничего волшебного. Мы используем трубы, так как нам нужно все связать цепочкой. Функция sass () компилирует sass в css, и следующая часть добавляется для обработки ошибок. Следуйте документации gulp-sass здесь, если вы запутались.
6. Объедините все в одну команду
Сначала я сказал вам, что gulp нужен для упрощения повторения. Но если мы запускаем все задачи по отдельности, используя отдельные команды, в этом нет смысла, верно?
Gulp позволяет нам запускать более одной задачи, используя одну команду для решения этой проблемы. Нам нужно только заменить функцию в задаче на массив задач, которые нам нужно выполнить.
Как видите, здесь я использую задачу gulp по умолчанию. Следовательно, нам нужно только запустить gulp в терминале. Сначала удалите текущую папку dist в своем проекте и выполните указанную выше команду. Вы увидите, что все указанные нами задачи выполняются безупречно и, как и раньше, встраиваются в каталог dist.
Теперь вы можете понять силу этого простого инструмента. Мы можем сделать его более достойным, заставив его автоматически запускаться при изменении файлов src.
7. Следите за файлами
Теперь давайте воспользуемся последней фундаментальной функцией (gulp.watch) в Gulp API, о которой я упоминал в начале, для автоматического обнаружения и создания новых изменений в папке dist.
В gulp.watch нам нужно указать, где смотреть и какие задачи должны выполняться при возникновении изменений. Например, необходимо следить за всеми файлами JavaScript, и при изменении любого из них будет выполнена задача minifyJS.
После того, как вы запустите команду gulp watch, gulp будет следить за указанными файлами, и необходимые задачи будут запущены при изменении.
Теперь у вас должно быть кристально ясное представление о Gulp и о том, как его использовать. Это делает жизнь разработчика проще и веселее. Есть гораздо больше задач, которые можно выполнить, добавив сторонние зависимости, как мы это сделали здесь.
Надеюсь, вам понравилась статья. Продолжайте читать и ура! :)
