В этой главе вы познакомитесь с некоторыми основами, связанными с Gulp.
Что такое система сборки?
Система сборки называется набором задач (вместе именуемых «исполнителями задач»), которые автоматизируют повторяющуюся работу.
Ниже приведен список некоторых задач, которые можно выполнить с помощью системы сборки:
- Компиляция препроцесса CSS и JavaScript.
- Минификация файлов для уменьшения их размера.
- Объединение файлов в один.
- Запуск сервера для автоматической перезагрузки.
- Создание сборок развертывания для хранения полученных файлов в одном месте.
В современном интерфейсном рабочем процессе система сборки работает с 3 компонентами:
- Менеджеры пакетов
- Препроцессоры
- Задачи и инструменты сборки
Менеджеры пакетов
Он используется для автоматизации установки обновления, удаления необходимых зависимостей, чистых библиотек и пакетов, используемых в среде разработки. Примером для менеджеров пакетов являются bower и npm .
Препроцессоры
Препроцессоры очень полезны для эффективного современного рабочего процесса, добавляя оптимизированный синтаксис и дополнительные функции, которые компилируются в его родной язык.
Некоторые из популярных препроцессоров —
-
CSS — SASS, LESS и Stylus.
-
JS — CoffeeScript, LiveScript, TypeScript и т. Д.
-
HTML — Markdown, HAML, Slim, Jade и т. Д.
CSS — SASS, LESS и Stylus.
JS — CoffeeScript, LiveScript, TypeScript и т. Д.
HTML — Markdown, HAML, Slim, Jade и т. Д.
Задачи бегунов
Исполнители задач автоматизируют задачи, такие как преобразование SASS в CSS, минимизируют файлы, оптимизируют изображения и многие другие задачи, используемые в рабочем процессе разработки. Gulp является одним из тех, кто выполняет задачи в современной рабочей среде, и работает на Node.
Настройка вашего проекта
Чтобы установить свой проект на своем компьютере, создайте папку под названием «работа», например. Рабочая папка содержит следующие подпапки и файлы —
Src — Местоположение предварительно обработанных исходных файлов и папок HTML.
Изображения — Содержит изображения без сжатия.
Сценарии — содержит несколько предварительно обработанных файлов сценариев.
Стили — содержит несколько предварительно обработанных файлов CSS.
Построить — эта папка будет создана автоматически, которая содержит производственные файлы.
Изображения — содержит сжатые изображения.
Сценарии — один файл сценария, содержащий минимизированные коды.
Стили — Отдельный файл CSS, содержащий минимизированные коды.
gulpfile.js — это файл конфигурации, который используется для определения наших задач.