Давайте модифицируем таск    build  

 

потому что нам нужно удалять папк   /dist   только в процессе   билдинга  (сборки нашего проекта)!

 

 

 

 

 

 

   Следующая задача - это автоматическая     ОПТИМИЗАЦИЯ ИЗОБРАЖЕНИЙ   

 

 

 

Для оптимизации изображений - нам нужно установить 2 пакета:

 

    gulp-imagemin  

 

   imagemin-pngquant   

 

Устанавливаем через    Terminal:  

 

      npm i --save-dev gulp-imagemin imagemin-pngquant  

 

 

   УСПЕШНАЯ   УСТАНОВКА!  

 

Переходим к подключению:

 

 

 

Далее, создадим соответствующие    таски  

 

 

И дополним на таск   build  

 

 

Переходим в    terminal   и проверяем как работает наш    build   с  обработкой картинок:

 

 

 

 

 

Все замечательно - до тех пор пока у нас не так много картинок.

 

  Когда картинок становиться много - они обрабатываются очень долго! 

 

Поэтому нужно, что бы наши картинки    кэшировать  !  

 

Для  этого в   terminal    установим:  gulp-cash 

 

  npm i gulp-cache --save-dev  

 

 

 

Проверяем, что наши пакеты установились:

 

 

И далее подключим наш пакет     gulp-cache  

 

 

И немного модифицируем наш таск   img  

 

 

  Однако!  

 

при билдинге -  у нас

 

Если мы перенесем в другое место папку  /img 

 

и файлы, которые хотим кэшировать - то   НЕ БУДЕТ РАБОТАТЬ НАША ОПТИМИЗАЦИЯ ИЗОБРАЖЕНИЙ 

 

Поэтому нам нужен - еще   таск   - для    ОЧИСТКИ КЭША 

 

 

 

Давай те сделаем создание АВТОМАТИЧЕСКОЕ - Автопрефиксов!

   Вендерные префиксы  

 

- в css     - необходимы для обеспечения

  максимальной совместимости  со ВСЕМИ БРАУЗЕРАМИ  

 

И было бы логичным сделать его АВТОМАТИЧЕСКИМ, что бы например написав :

 

  dysplay: flex     - это новый модуль в  CSS (и ему обязательно нужны вендерные префиксы)

 

(в sass или css)   -  у нас бы автоматически - распаковывались бы все префиксы:

 

  web-kit-flex         moz-flex         ms-flex 

 

Для подключения вендерных префиксов - нам необходимо установить пакет:

 

  gulp-autoprefixer  

 

В терминале пишем:

 

   npm i --save-dev gulp-autoprefixer  

 

 

 

и модифицируем наш таск     'sass' 

 

Например в ТАСКЕ    'css-libs'    и так есть все префиксы. Разработчики об этом позаботились.

 

А когда мы будем писать свой     'main.sass'   -  нам понадобиться автоматическое добавление префиксов.

 

Поэтому:    модифицируем наш таск     'sass' 

 

 

 

 

И друзья - мы забыли  подключить      autoprefixer  

в      gulpfile.js  

 

 

Все, переходим в     terminal    и запустим  таск:      gulp watch  

 

 

 

И давайте что-нибудь напиши  в     main.sass 

 

 

 

 

 

    Здесь все! Закончили!

 

Можно так же скачать на    GitHub    - пример проекта этого. Но по сути, все тоже самое  - мы уже проделали у себя!

 

   ОШИБКИ КОМПИЛЯЦИИ:    

 

 

Что бы работала сборка   build   - прийдется убрать   cache 

 

 

Ответ:

 

 

Простой способ создания файла с нестандартным расширением: