tpl-gulp

---

Шаблон сборки для разработки с использованием сборщика GULP, стек технологий:

HTML, TypeScript, Tailwindcss, SCSS, Webpack, Autoprefixer, Postcss, WOFF, WOFF2, WEBP, SVG спрайты.

Gulp

Шаблон написан преимущественно на языке TypeScript и предназначен для вёрстки HTML, стилизации CSS и написания кода на typescript.

Быстрый старт

git clone https://github.com/webnice/tpl-gulp.git
cd ./tpl-gulp
make dep
make dev

или

git clone https://github.com/webnice/tpl-gulp.git
cd ./tpl-gulp
npm install
npm run build

Особенности

• Gulp 🚀 - Универсальный и простой сборщик, задачи легко читаются и понятны для новичков.
• Typescript 🪶 - Задачи gulp написаны на Typescript, а вся сборка ориентирована на создание кода на Typescript. Типизация - наше всё 😃.
• Tailwindcss 🛠️ - Современная утилита вёрстки без использования CSS или SCSS, идеально для тех у кого аллергия на стили.
• SCSS 🔋 - Те же кто предпочитает стили, могут использовать SCSS.
• Webpack 👍 - Сборка использует webpack, postcss, autoprefixer и многое другое что даёт в результате оптимизированную современную вёрстку и хороший код.
• webp 💯 - И конечно же сборка автоматически генерирует webp копии изображений и если их поддерживает браузер, то они интегрируются как в html, так и в css.

Документация

Назначение папок сборки

Технические директории и файлы настроек

/@types - Типы TypeScript для задач gulp.

/gulp/config - Конфигурация сборщика gulp.

/gulp/task - Задачи сборки.

Временные вспомогательные директории.

/.tmp - Временная директория с промежуточными результатами сборки.

Исходные ресурсы и данные

/src/assets - Любые ресурсы проекта, копируются в директорию результата без обработок.

/src/fonts - Шрифты в форматах otf и ttf.

/src/html - HTML файлы, шаблоны и подключаемые в результирующий HTML компоненты и куски HTML.

/src/img - Изображения.

/src/scss - Файлы стилей в формате языка SCSS (диалект SASS).

/src/svg-icon - Изображения в формате SVG из которых создаётся единый спрайт SVG содержащий в одном файле все изображения из директории.

/src/ts - Директория дл программного кода на языке TypeScript.

Директории с результатами сборки

/build - Результат сборки в режиме продакшн и в режиме разработчика. В корень директории попадают HTML файлы, остальные файлы размещаются во вложенных директориях.

/build/assets - Копия файлов assets.

/build/css - Директория размещения CSS файла(ов), которые были созданы из SCSS и Tailwindcss.

/build/js - Директория размещения javascript файлов.

/build/fonts - Директория размещения шрифтов преобразованных в форматы woff и woff2.

/build/img - Директория размещения всех изображений и спрайта.

/dist - Результат сборки только в режиме продакшн, для публикации на сервере или интеграции в back-end. Структура вложенных файлов директорий идентична как у директории /build.

Команды

Можно использовать привычные для javascript разработчиков команды npm run , но так же помимо них создан Makefile и можно управлять проектом используя команду make.

Команда make без параметров или make help.

Выводит на экран список доступных команд и описание к ним.

make

Команда make dep

Загружает все зависимости сборки, аналог команды npm install.

make dep

Команда make dev

Запускает проект в режиме разработчика, в этом режиме происходят следующие действия:

• Выполняется сборка проекта в режиме разработчика.
• Запускается локальный веб сервер.
• Запускается наблюдатель за файлами и при изменении исходных файлов выполняется сборка проекта и перезагрузка страницы в браузере.

Аналог команды npm run build.

make dev

Команда make clean

Выполняется полная очистка сборки от всех временных файло, файлов с результатом, а так же директории node_modules.

make clean

Авторы

Alex Geer https://github.com/monoflash

Лицензия

ISC - Свободная лицензия для программного обеспечения, созданная и используемая Internet Systems Consortium. Подробности в файле LICENSE.

ISC license, Internet Systems Consortium license. See LICENSE for more information.