Улучшенная сборка проекта на Gulp 4, Сжатие изображений на Gulp 4, Плагин gulp-imagemin

Я покажу улучшенную версию Сборки проекта на Gulp 4, в этом видео уроке по сборщику Gulp мы так же узнаем как сжимать изображения на Gulp 4 с помощью модуля gulp-imagemin.

Данный файл будет создан автоматически так же как и папка node_modules после выполнения команды npm i

Плагин gulp-sass обновился, в связи с этим немного изменился принцип его подключения.
Для корректной работы таска styles нужно дополнительно установить пакет sass: npm i sass --save-dev
и заменить способ подключения с: const sass = require('gulp-sass');
на: const sass = require('gulp-sass')(require('sass'));

✔Советую посмотреть:

#gulp #gulp4 #itdoctor #обучение #gulpsass #gulpless #gulpbuild

[kjnzmhq]

Чувак спасибо !!!! Улучшенная сборка с первого раза запустилась))))

[maksbeel]

Спасибо за твои видио, все просто и доходчиво не то что у других!

[igork.]

Шикарно! Все по полочкам! Спасибо! Подписка и лукас, без вариантов.

[arayoflight]

Огромное спасибо за сборку и метод минимизации изображений. Одно удовольствие от применения - некоторые проекты сжимает на 50% + )))

[stasalsakhanov]

Интересно было бы посмотреть твою сборку gulp4 + pug + scss.

[kostpss]

Благодарю за подробную инструкцию по пользованию gulp'ом. Так же благодарю за видео по теме Git. Исмаил, а подскажите, как правильно организовать(как организовывается) работу gulp+git, мы должны создавать репозиторий в папке build? Или просто создавать отдельную директорию, скидывать туда файлы из папки build и фаил index.html, и все это пушить на github?

[murshi]

Я ещё плагин panini добавил. Офигенно удобно.

[KIRA-vtch]

А почему gulp-clean-css не убирает коментарии в файле при сжатии??

[etyrxln]

Спасибо за информативное видео:) но у меня проблема. почему то imagemin ломает изображение. ошибок никаких не выдает, сценарий полностью выполняется, просто в результате изображение не открывается.

[kjnzmhq]

Почему при запуска Gulp весь JS код исчезает из папки script.js ??

[arinoko]

Не могу понять почему, но на изменения в папке с изображениями в src не происходит никаких изменений в build. Я даже специально попробовала добавить пайп стрим, но тоже ничего. Не могу понять в чем дело, оно же должно автоматически подтягивать новые изображения из src?

[gamides]

при запуске пишет
The following tasks did not complete: scripts, img-compress
[22:25:13] Did you forget to signal async completion?

[rgwhfxq]

Привет
Было бы интересно узнать от тебя, как лучше ставить библиотеки. Скачивать каждую в папку либс и подключать вручную в галп файле и както конкатить файлы, что делать если в либе есть картинки или свои css файлы, импортить их в свой главный файл или как лучше, или лучше через нпм импорты прописать как вариант. Короче говоря вопросов вагон в этом плане

Есть видосы где делают вообще микс из галпа и вебпака. Что ты думаешь по этому поводу?

И что за тема в vscod стоит, уж очень понравилась

[jikler]

Какой толк от этого imagemin если после него я на маке пробую сжать картинки программой imageoptim и они еще сжимаются в полтора два раза без потери качества.

[kjnzmhq]

Через html изображения подключаться, а через scss (style)нет через background-image никак.Сами стили работают.В чем может быть причина??

[jcyrwzi]

Спасибо тебе за твой труд. Подскажи, а можно ещё настроить чтобы файлы скачанных шрифтов автоматом подключать?

[MArt-lzxu]

Спасибо за супер уроки.
Помогите понять, почему не работает с Вашего gulpfile.js gulp-clean
gulp.task('styles', () => {
//Шаблон для поиска файлов CSS
//Всей файлы по шаблону './src/css/**/*.css'
return gulp.src(styleFiles)
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(concat('style.css')) //Объединение файлов в один
.pipe(cleanCSS({ //Минификация CSS
compatibility: 'ie9',
level: 2
}))
.pipe(sass().on('error', sass.logError))


.pipe(browserSync.stream());
});

[andsheterliak]

Спасибо за урок, планируете ли вы в эту сборку добавить режимы (dev/prod)?

[StepanVorobiov]

А можно ли как нибудь ко всему этому прикрутить фреймворк Express?

[uwjejyg]

Всё сделал как вы сказали на видео. Указал путь в html - <img src="build/img/" alt=""> .... перед script . Но при запуске локального сервера, изображения не загружаются ...((