Учебники

Глоток – Основы

В этой главе вы познакомитесь с некоторыми основами, связанными с 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 – это файл конфигурации, который используется для определения наших задач.