Candy Gulp

^{Built with ❤︎ by PHEDERAL and contributors}

---

Сборка для практичной верстки.
Работает с Gulp, VScode и PNPM.

---

• Установка
• Команды
• Структура
• Настройки проекта
  • package.json
  • project.js
  • projectFTP.js
  • projectSmartGrid.js
• Возможности
  • Кратко
  • Подробно
• Contributing

Установка

Вам нужно установить pnpm так как сборка лучшего все работает именно с ним. Устанавливаем PNPM в систему

# Windows PowerShell:
iwr https://get.pnpm.io/install.ps1 -useb | iex

# Curl Installer
curl -fsSL https://get.pnpm.io/install.sh | sh -

# Wget
wget -qO- https://get.pnpm.io/install.sh | sh -

Если вы используете Bash / GitBash / Zsh и т.п.
Установите pnpm как глобальный пакет.

sudo npx pnpm add -g pnpm

Команды

Задача	Режим	Описание
npm run config		Создать конфиг файлы проекта
npm start	DEV	Сборка проекта + запуск сервера
npm run build	DEV	Сборка проекта в Development
npm run prod	PROD	Сборка проекта в Production
npm run backend	PROD	Сборка проекта в Backend
npm run server		Запустить сервер (без сборки проекта)
npm run watch		Запустить наблюдитель (без сборки проекта)
npm run clear		Удаление папки с билдом проекта
npm run root		Копирование файлов вне ./src/*
npm run html		Компиляция HTML + PHP ./src/html
npm run php		Компиляция PHP Functions ./src/php
npm run js		Компиляция JS
npm run css		Компиляция SCSS/CSS
npm run img		Компиляция картинок
npm run sprite		Компиляция SVG спрайтов
npm run font		Компиляция шрифтов
npm run fs		Компиляция стилей шрифтов для SCSS
npm run favicon		Компиляция фавиконок
npm run ftp		Загрузка билда проекта по FTP
npm run zip		Сборка проекта в ZIP архив
npm run help		Справка по командам Gulp CLI

https://github.com/pnpm/pnpm/releases/latest

Структура

public                - билд проекта
src                   - исходные файлы
project.js            - настройки проекта
projectFTP.js         - настройки FTP доступа
projectSmartGrid.js   - настройки SmartGrid

src/html      - HTML/PHP
src/sass      - SCSS/CSS
src/js        - JS (Webpack)
src/img       - Картинки
src/data      - Данные для HTML шаблонов
src/font      - Шрифты
src/ico       - Favicon
src/php       - PHP Functions (for WP)

Настройки проекта

Вы можете настроить сборку под каждый проект индивидуально. Конфиг файлы генирируются автоматически если вы запускаете любую из задач, или вы можете сгенерировать их сами с помощью команды npm run config

package.json

По умолчанию папка при билде проекта ./public, но вы можете изменить путь для билд папки в package.json

"buildFolder": "./public", | например на "../build-project"

project.js

Настройки проекта, сервера, прокси, ip и port, компрессии изображений, необходимости в SmartGrid и т.д..

projectFTP.js

Настройки данных для выгрузки проекта на хостинг по FTP. Если вы заливаете свой проект в git репозиторий, то данный файл не попадет в него. Сделано это ради безопасности. Но вы можете включить его в выгрузку если уберете строчку с названием данног файла из .gitignore

projectSmartGrid.js

Настройки SmartGrid. Если вы запускаете сервер/наблюдатель то при любом изменении данного файла, произойдёт повторная сборка CSS файлов. Если в файле project.js вы установили smartgrid: false, то любые остатки от SmartGrid будут автоматически удалены из всех CSS файлов. Файл настроек вы можете удалить сами, или оставить если вновь захотите использовать данную технологию.

Возможности

Кратко

Возможность	Статус	Подробнее
Компиляция HTML + PHP	✅	./src/html
Компиляция PHP	✅	./src/php
Компиляция SCSS/CSS	✅
Компиляция JS	✅	Webpack + ESbuild
Поддержка SmartGrid	✅	./project.js > smartGrid
Компиляция SVG спрайтов	✅	Mono-color / Multi-color
Компрессия SVG картинок	✅	Minify + Cleaner
Компрессия изображений	✅	PNG / JPEG / SVG / GIF
Поддержка WEBP изображений	✅	авто подключение в HTML + PHP
Поддержка AVIF изображений	❌
Конвертация шрифтов	✅	OTF/TTF/WOFF/WOFF2/EOT
Авто подключение шрифтов	✅
Синхронизация файлов вне директорий	✅	файлы в ./src/*
Легкая очистка директорий	✅	npm run clear
Архивирование всего проекта	✅	только ./public/*
Деплой проекта по FTP	✅	только ./public/*
Компиляция Markdown	❌
Публикация на GitHub Pages	❌
Сервер для сборки (BrowserSync)	✅	npm run server
Поддержка LocalTunnel	✅	online: true в ./project.js
Информация по командам	✅	npm run help
Нативная поддержка задач VScode	⭕	only default task

Подробно

• Gulp
  • Console Messages
  • Style console logs
  • Loading Animation
  • Progress Line
  • FTP upload (./public)
  • Hidden advanced settings (.vscode, .eslintrc, etc)
  • .vscode/snippets & extensions file
  • Help Menu (task help)
  • Aliases for tasks (gulp html > gulp h)
  • Hiding system messages (silent default)
  • Auto create file config for project
  • Auto create file config for FTP
  • Auto create file config for smart-grid
  • Settings for disable smart-grid
  • Errors do not break the build
• HTML
  • Compile
  • Include/Import
  • Templating
  • Foreach (Repeater)
  • Minify
  • Sorting Classes
  • Typograf
• SASS/SCSS
  • Compile
  • Include & Import Glob
  • Import on Imported (recursive)
  • Import from node_modules without all path
  • Minify
  • Partials
  • Reset CSS sanitize.css
  • SmartGrid
• JS
  • Webpack Stream (w/ ESbuild)
  • Minify (only --prod)
  • Using all JS files without underscore in the file name
• Font
  • OTF to TTF
  • TTF to WOFF
  • TTF to WOFF2
  • TTF to EOT
  • Generate fontface to _fonts.scss (auto included)
• Image
  • Compress (Imagemin)
  • Convert to WEBP
  • Convert to AVIF
  • Сonvert only newer or changed images
  • Auto <pictures> tags on HTML with .WEBP images
  • Responsive images (1x, 2x, 3x, 4x)
• SVG
  • SVG minify
  • Sprites compiler from img/sprite-mode.svg/* to img/sprite/mode.svg
  • Icons (svg,png) from img/icons to img/icons/*
  • Exclude sprite.svg/* files from gulp.dest
  • Exclude icons/* files from gulp.dest
• Markdown
  • Compile with gulp-markdown
  • Minify
• Favicon
  • Generate files
  • Load files into folder
  • Generate HTML meta's
  • Automate include HTML into HEADER
• PHP/WordPress
  • Watch php files
  • BrowserSync can read PHP files
  • Do not edit php tags (typograf)
  • Can useless for development themes
• Server (BrowserSync)
  • Custom UI for server info
  • Enable/Disable UI
  • Enable/Disable Online mode
  • Enable/Disable LocalTunnel
• VScode
  • Recommended extensions
  • Snippets
  • HTML
  • JS
  • CSS

Contributing

1. Fork it on GitHub!
2. Clone the fork to your own machine.
3. Checkout your feature branch: git checkout -b my-awesome-feature
4. Commit your changes to your own branch: git commit -am 'Add some feature'
5. Push your work back up to your fork: git push -u origin my-awesome-feature
6. Submit a Pull Request so that we can review your changes.

NOTE: Be sure to merge the latest from "upstream" before making a pull request!