Давайте модифицируем таск 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
Ответ:
Простой способ создания файла с нестандартным расширением:
