Учебники

Gulp — Разработка приложения

Январь 4, 2019

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

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

  • Объявление необходимых зависимостей
  • Создание задачи для зависимостей
  • Выполнение задачи
  • Смотря задачу

Декларация зависимостей

При установке плагинов для приложения необходимо указать зависимости для плагинов. Зависимости обрабатываются менеджером пакетов, таким как bower и npm.

Давайте возьмем один плагин под названием gulp-imagemin для определения зависимостей для него в файле конфигурации. Этот плагин может быть использован для сжатия файла изображения и может быть установлен с помощью следующей командной строки — 

npm install gulp-imagemin --save-dev

Вы можете добавить зависимости в файл конфигурации, как показано в следующем коде. 

var imagemin = require('gulp-imagemin');

Вышеупомянутая строка включает в себя плагин, и он включен как объект с именем imagemin .

Создание задачи для зависимостей

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

gulp.task('task-name', function() {
   //do stuff here
});

Где ‘task-name’ — это имя строки, а ‘function ()’ выполняет вашу задачу. «Gulp.task» регистрирует функцию как задачу в имени и определяет зависимости от других задач.

Вы можете создать задачу для определенной выше зависимости, как показано в следующем коде. 

gulp.task('imagemin', function() {
   var img_src = 'src/images/**/*', img_dest = 'build/images';

   gulp.src(img_src)
   .pipe(changed(img_dest))
   .pipe(imagemin())
   .pipe(gulp.dest(img_dest));
});

Изображения находятся в src / images / ** / *, который сохраняется в img_srcobject. Он передается другой функции, созданной конструктором imagemin. Он сжимает изображения из папки src и копирует их в папку сборки, вызывая метод dest с аргументом, который представляет целевой каталог.

Выполнение задачи

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

gulp imagemin

Запустив задачу с помощью приведенной выше команды, вы увидите следующий результат в командной строке:

47
Share: