Для первого запуска Gulp потребуется Node JS, если он не установлен. Переходим https://nodejs.org/en/ и скачиваем установщик. После установки, можем посмотреть какую версию мы установили и определяется ли Node JS у нас с помощью команды
node --version
Работа с Gulp осуществляется не только с помощью Node JS, но и его менеджера пакета npm и команды утилиты npx
Поэтому тоже используем команду--version для проверки их версии
npm --version
npx --version
Выполняется командой
npm install --global gulp-cli
npm i gulp
Быстро настроить сборку вашего проекта на Gulp и писать код на:
- HTML
- CSS, SASS
- Java Script
- минификация HTML
- компиляция препроцессоров SASS
- минификация CSS
- автоматическое добавление префиксов CSS
- минификация JavaScript
- сжатие изображений
- отслеживание изменений в файлах
- локальный сервер с автоматическим обновлением страницы при изменении файлов
- gulp Сборщик Gulp
- browser-sync Автоматическое обновление сайта при изменении файлов
- gulp-file-include Подключение шаблонов
- gulp-htmlmin Минификация HTML файлов
- gulp-concat Объединение нескольких файлов в один
- sass Компилятор Sass
- gulp-sass Компиляция Sass и Scss файлов
- gulp-uglify Сжатие и оптимизация Java Script кода
- gulp-autoprefixer Автоматическое добавление префиксов в CSS
- gulp-clean-css Минификация и оптимизация CSS файлов
- del Удаление каталогов и файлов
- gulp-rename Переименовывает файлы и минифицирует
- gulp-imagemin Сжатие изображений
- gulp-group-css-media-queries Объединяет и выносит в конец файла все медиа запросы
npm i gulp-file-include
То есть вводим в команду название плагина, а npm уже установит данный плагин нам, так же плагины можно устанавливать несколько за раз и теперь команада будет выглядеть таким образом
npm i gulp-file-include gulp-htmlmin gulp-concat
Gulp имеет возможность установаить сразу все плаигны, которые раньше были установлены в package.json с помощью команды
npm i
Если устанавливаем Галп ни Windows. Есть вероятность ошибки, связанной с правами. Решение: PowerShell запускаем от имени администратора и прописываем следующую команду
Set-ExecutionPolicy RemoteSigned
imagemin устанавливаем 7.1.0 версии
Если возникает проблемы с плагином Sass, нужно проверить константу, и заменить
scss = require('gulp-sass')(require('sass'));
Если возникает проблемаа с плагином WEBP-CSS то здесь нужно установить converter
npm install [email protected]
Папка проекта не должна называться gulp
WEBP-CSS выдает ошибку, если в названии файла картинки есть пробелы, кириллица
У кого копирует в dist только .jpg попробуйте немного изменить запись форматов с /.{jpg, png, svg, gif, ico, webp} на /.+(png|jpg|gif|ico|svg|webp)