Сборка веб-приложений, основанная на Gulp
<

Сборка веб-приложений, основанная на Gulp

2025-04-25

Описание проекта

Сборка веб-приложений, основанная на Gulp.
Она обеспечивает полный цикл разработки, включая компиляцию JavaScript, обработку стилей SASS/SCSS, оптимизацию изображений и минификацию HTML

Установка

Клонируйте репозиторий:

1
git clone https://github.com/phillakt/gulp-build.git

Перейдите в директорию своего проекта:

1
cd my-project

Рекомендуемые версии node (16.20.2) и npm (8.19.4):

1
node -v
1
npm -v

Установите зависимости:

1
npm install

Если не устанавливаются зависимости то указываем флаги: 

1
npm i --force

или 

1
npm i --legacy-peer-deps

Использование

Для обычной сборки default:

1
gulp

Для production сборки: 

1
gulp build

Структура проекта

Основная структура проекта:

1
2
3
4
5
6
7
8
9
project/
├── src/
│   ├── js/
│   ├── scss/
│   └── index.html
├── dist/
├── gulpfile.js
├── package-lock.json
└── package.json

Задачи Gulp

  1. clean: Удаляет директорию dist для чистой сборки.
  2. minifyHtml: Минифицирует HTML файлы.
  3. html: Копирует HTML файлы в директорию dist.
  4. js: Компилирует и минифицирует JavaScript файлы с помощью Rollup.
  5. concatJs: Объединяет JavaScript файлы, включая внешние библиотеки.
  6. styles: Компилирует SASS/SCSS в CSS, минифицирует и объединяет стили.
  7. images: Оптимизирует JPEG и PNG изображения.
  8. svg: Минифицирует SVG файлы.
  9. build: Основная задача сборки, выполняющая все вышеперечисленные задачи.
  10. default: Задача по умолчанию, которая отслеживает изменения файлов и запускает соответствующие задачи.

Зависимости

  • gulp: Система сборки для автоматизации задач разработки
  • imagemin: Оптимизация изображений
  • gulp-clean-css: Минификация CSS файлов
  • browser-sync: Синхронизация браузера и автоматическое обновление
  • gulp-concat: Объединение файлов
  • gulp-uglify: Минификация JavaScript
  • rollup: Сборщик модулей JavaScript
  • sass: Препроцессор CSS
  • gulp-sass: Интеграция Sass с Gulp
  • gulp-sourcemaps: Создание source maps
  • del: Удаление файлов и директорий
  • gulp-if: Условное выполнение задач в Gulp
  • gulp-svgmin: Минификация SVG файлов
  • gulp-rename: Переименование файлов
  • minimist: Парсинг аргументов командной строки
  • gulp-htmlmin: Минификация HTML файлов

Возможные ошибки при установке зависимостей

  1. Ошибка при установке pngquant.
    Возможное решение - устанавливаем раннюю версию модуля imagemin-pngquant и pngquant-bin:
1
npm install imagemin-pngquant@5.0.1 --save-dev --legacy-peer-deps
1
npm install pngquant-bin@3.1.1 --save-dev --legacy-peer-deps

Преимущества в использовании сборки Gulp

  • Автоматизация процессов разработки.
  • Поддержка модульной архитектуры JavaScript.
  • Оптимизация производительности благодаря минификации и сжатию ресурсов.
  • Удобный рабочий процесс с автоматическим обновлением браузера.
  • Легкого расширяется функционал сборки.
<