gulp 4- Gulp.jswebpack 4- сборка JavaScripteslint- линтер JavaScript airbnb-basebabel- транспайлер JavaScriptgulp-autoprefixergulp-pug- шаблонизатор PUG (Jade)gulp-sass- препроцесоор стилейgulp-stylelint- линтер SCSS — config-sass-guidelinesgulp-group-css-media-queries- группировка стилей по media-queriesautoprefixer-stylus- подстановка вендорских префиксов в CSSgulp-csso- минификация CSSgulp-svg-sprite- генератор SVG-спрайтовbrowser-sync- сервер и синхронное тестирование сайта в браузерах
Для работы шаблона необходимо установить nodejs
$ git clone https://github.com/econavi/tmpl.git <project-name>
$ cd <project-name>
$ npm installПо окончанию выполнения будут установлены все необходимые пакеты.
$ gulp dev- запуск шаблона для разработки с отслеживанием изменений$ npm run public- полная сборка проекта на production$ gulp html- компиляция Pug$ gulp styles- компиляция Stylus$ gulp scripts- сборка JS$ gulp images- копирование изображений в папкуpublic/$ gulp fonts- копирование шрифтов в папкуpublic/$ gulp misc- копирования файлов типаrobots.txtи т.п., в корень проекта$ gulp iconsSvg- сборка спрайта для SVG иконок$ gulp clean- очистка папкиpablic/$ gulp server- запуск локального сервера с автоматической перезагрузкой браузера$ gulp watch- запуск отслеживания изменнений в файлах$ gulp build- полная сборка проекта
├── app/ # Исходники
│ ├── assets/ # Статические файлы для копирования в `public/`
│ │ ├── fonts/ # Файлы со шрифтами
│ │ ├── icons/ # Наборы иконок для спрайтов
│ │ │ └── svg/ # SVG иконки для генерации векторного спрайта
│ │ ├── img/ # Растровая и векторная графика
│ │ │ ├── content/ # Изображения для контента
│ │ │ ├── favicons/ # Набор favicons для проекта
│ │ │ └── general/ # Изображения для стилизации
│ │ └── misc/ # Общие файлы, которые будут перемещены в корень собранного проекта
│ ├── blocks/ # Блоки
│ │ └── block/ # Блок
│ │ ├── block.pug # Разметка блока
│ │ ├── block.js # Скрипт блока
│ │ └── block.scss # Стили блока
│ ├── pug/ # Файлы с разметкой
│ │ ├── index.pug # Разметка главной страницы
│ │ ├── pages/ # Внутренние страницы
│ │ │ └── inner-page.pug # Страница второго уровня вложенности
│ │ └── templates/ # Шаблоны разметки
│ │ ├── head.pug # <head>
│ │ └── default.pug # Дефолтный шаблон
│ ├── scripts/ # Скрипты
│ │ └── app.js # Главный скрипт
│ └── styles/ # Стили
│ ├── helpers/ # Помощники
│ │ ├── base.scss # Базовые стили проекта
│ │ ├── fonts.scss # Подключение шрифтов
│ │ ├── mixins.scss # Примеси
│ │ ├── normalize.scss # Сброс стилей и фиксы
│ │ ├── svg-size.scss # Переменные с размерами SVG спрайта (автосборка)
│ │ └── variables.scss # Переменные
│ └── app.scss # Главный стилевой файл
├── public/ # Сборка проекта для паблика (автогенерация)
├── tasks/ # Задачи для Gulp
├── .editorconfig # Конфигурация настроек редактора
├── .eslintrc # Конфигурация проверки JavaScript в ESLint
├── .stylelintrc # Конфигурация проверки SCSS
├── .gitignore # Список исключённых файлов из Git
├── browserlist # Список версий браузеров для Autoprefixer
├── createBlock.js # Утилита создания новых блоков
├── gulpfile.js # Файл для запуска задач Gulp
├── package.json # Список модулей и прочей информации
├── readme.md # Документация шаблона
└── svg-sprite-template # Шаблон для сборки SVG спрайта
После запуска шаблона командой $ gulp dev или просто $ gulp (по умолчанию), происходит сборка проекта с отслеживанием изменений всех файлов в каталоге app/, на всех уровнях вложенности.
В дальнейшем вся разработка должна осуществляться в каталоге app/.
Для HTML разметки, в проекте применяется шаблонизатор Pug (бывший Jade), главным преимуществом которого, является возможность создавать шаблоны для целых разделов или отдельных страниц внутри проекта.
Все страницы и их шаблоны размещены в папках app/pug/pages/ и app/pug/templates/ соответственно.
Структура страниц и их шаблонов имеет следующий вид:
pug/
├── pages/
│ ├── lev1/index.pug
│ │ └── lev2/index.pug
│ └── index.pug
│
└── templates/
└── default/
├── head.pug
└── template.pug
По умолчанию, в папке templates/ расположен единственный шаблон default/.
Шаблонов может быть любое количество.
Рекомендуется под каждый шаблон заводить отдельную папку.
Шаблон default/ содержит внутри себя два файла:
head.pug- элемент<head>содержащий метаданные, линки на файлы со стилями и т.п.template.pug- сам шаблон, в который подключаются элемент , скрипты и прочие неизменные блоки, необходимые для каждой страницы сайта, такие как header, footer, sidebar, menu и пр.
Если в каких-либо подключенных блоках на проекте нет необходимости, они либо комментируются, либо удаляются из соответствующих строк кода внутри template.pug.
Папка pages/ содержит саму структуру сайта и располагает в себе:
index.pug- файл для главной страницы.lev1/index.pug- раздел первого уровня вложенности от главной страницы.lev2/index.pug- раздел второго уровня вложенности от главной страницы (расположен внутриlev1/).
Структура сайта может иметь любое количество уровней вложенности.
Разделы lev1/ и lev2/ должны быть переименованы под соответствующие нужды или удалены вовсе, например, если разрабатывается SPA.
Каждая страница сайта должна содержать минимально-необходимый набор строк кода, а именно:
- подключаемый шаблон
- относительный путь до корня сайта
- заголовок страницы
- описание страницы (по желанию)
- блок с основным контентом
На примерах:
/* Для главной страницы `pages/index.pug` */
extends ../templates/default/template.pug
block head
- var path = '';
- var pageTitle = 'Главная страница';
- var pageDescription = 'Описание главной страницы';
block content
...
/* Для страницы `pages/lev1/index.pug` */
extends ../../templates/default/template.pug
block head
- var path = '../';
- var pageTitle = 'Раздел первого уровня';
- var pageDescription = 'Описание раздела первого уровня';
block content
...
/* Для страницы `pages/lev1/lev2/index.pug` */
extends ../../../templates/default/template.pug
block head
- var path = '../../';
- var pageTitle = 'Раздел второго уровня';
- var pageDescription = 'Описание раздела второго уровня';
block content
...
При запуске шаблона $ gulp dev или сборки проекта на production $ npm run public, все страницы из папки app/pug/pages/ будут скомпилированы в HTML код и размещены в папке public/, сохраняя свою файловую структуру.
При запущенном шаблоне, любое изменение .pug файлов, внутри папки app/, приведет к немедленной перекомпиляции в папке public/.
├── app/
│ ├── assets/
│ │ ├── icons/
│ │ │ └── svg/ # SVG иконки для генерации векторного спрайта
Подключение на страницу через миксин.
Примеры:
+icon('file_name')
+icon('file_name'[, 'class_name'])
Для создания нескольких блоков, названия нужно указывать через пробел.
npm run make-block [имя-блока] [имя-блока]
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent