Gulp таски

Структура 

Все таски хранятся в каталоге ./gulp:

./gulp
├── config.js
└── tasks
    ├── assets.js
    ├── clear.js
    ├── favicons.js
    ├── images.js
    ├── prepare.js
    ├── pug.js
    ├── server.js
    ├── sprites.js
    ├── styles.js
    └── webpack.js

Таски 

Разберем значение файлов:

• config - хранит часто используемые в тасках данные, например пути к файлам и каталогам и т.п.;
• assets - переносит определенные файлы из одного места в другое;
• clear - удаляет каталог build, хранящий собранную версию;
• favicons - генерирует фавиконки;
• images - оптимизирует картинки;
• prepare - подготавливает сборку к работе;
• pug - преобразует pug в html;
• server - виртуальный сервер (live server);
• sprites - создает svg спрайт;
• styles - компилирует scss в css;
• webpack - преобразует js код из нового формата в старый, для кроссбраузерности.

gulpfile.babel.js 

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

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

Основные команды 

gulp watch    

gulp build

gulp proxy

gulp replaces

gulp prepare

Продакшн 

Если добавить к любой команде --prod, то она выполнится в режиме продакшн, например:

gulp build --prod

В данном случае будет запущен Live Server, файлы будут минифицированы, а картинки оптимизированы.