Введение
Цель данной сборки, обеспечить комфортную работу с минимальной начальной настройкой проекта.
Основа сборки
Сборка содержит шаблонизатор Pug, препроцессор SCSS, сборщик модулей Webpack.
Особенности сборки
- Оптимизация под Page Speed
- Отложенная загрузка
- Критические стили
- Базовая SEO оптимизация
- Open Graph / Twitter Cards
- JSON-LD микроразметка
- Google Analytics / Yandex Metrika
- Pug шаблонизатор
- Улучшенный фильтр markdown-it
- Возможность добавлять свои фильтры на примере фильтра special-chars
- Работа с json данными
- SCSS препроцессор
- Webpack сборщик
- Возможность использовать новый формат JS по максимуму
- Оптимизация кода через Babel
- SVG спрайты
- Цветные
- Черно-белые
- Оптимизированные изображения
- Генерация webp и avif форматов
- Настроенные линтеры
- Stylelint
- Pug-lint
- ES-Lint
- Prettier
- Editorconfig
- Автоматическая генерация favicons
Инструкция по установке
Шаг 1
Скачать или клонировать Gulp сборку.
git clone git@github.com:eliofery/gulp-template.git
Шаг 2
Установить зависимости.
sudo apt update && sudo apt install graphicsmagick
npm i
Шаг 3
Загрузите свою svg favicon в каталог ./src/assets/favicons с именем icon.svg.
Favicon должен быть размером не менее 512x512, например.
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512">...</svg>
При сборке проекта на основе icon.svg будут созданы другие необходимые favicons.
Шаг 4
Отредактировать файл package.json, изменив название, описание, версию проекта, ссылки на репозиторий и т.д.
Внести изменения в файл ./gulp/config.js, в разделе replacement, согласно наименованию вашего проекта. Изменять следует только свойство new, например:
...
// Замена текста в файлах
replacement: {
env: { old: 'dev', new: 'prod' },
url: { old: 'http://localhost', new: 'https://site.domen' },
title: { old: 'Название сайта', new: 'Новое имя сайта' },
desc: { old: 'Описание сайта', new: 'Новое описание сайта' },
version: { old: '1.0.0', new: '2.0.0' },
color: { old: '#000', new: '#777' },
google: { old: 'GTM-XXXXXX', new: 'GTX-325264' },
yandex: { old: 'XXXXXX', new: 'jsdhgy7562' },
},
...
Gulp будет искать значения прописанные в параметрах old и менять их на значения параметров new, в файлах:
// Файлы в которых производится замена текста
files: [
`${srcPath}}/assets/manifest.json`,
`${srcPath}}/pug/data/config.pug`,
`${srcPath}/pug/pages/index.pug`,
],
После чего выполните команду, которая заменит текст:
npm run replaces
Или, чтобы заменить текст и автоматически удалить промо страницу с инструкцией, выполните команду.
npm run preperate
Шаг 5
Теперь вы готовы приступить к верстке своего проекта.
Соберет проект и запустит Live Server в режиме разработки. Файлы не будут минифицированы, а картинки оптимизированы.
npm run dev
Соберет проект в режиме продакшн. Файлы будут минифицированы, а картинки оптимизированы.
npm run build
Запустит Live Server без компиляции проекта. Если не хочется заново компилировать проект, а только запустить сервер.
npm run proxy
Если при сборке возникнет ошибка: DSO support routines:DLFCN_LOAD:could not load the shared library:dso_dlfcn.c:185:filename(libproviders.so).
Обнулите значение переменной OPENSSL_CONF:
export OPENSSL_CONF=/dev/null
Примеры верстки с Pug
Json данные в Pug
Хранятся в каталоге ./src/pug/data. Например файл mainNav.json.
Чтобы получить доступ к его значениям, нужно обратиться к глобальной переменной jsonData, которая отвечает за вывод данных из json файлов, хранящихся в каталоге data.
jsonData.имя_файла
Получение содержимого из файла mainNav.json будет выглядеть следующим образом:
jsonData.mainNav
Вывода навигации
Рассмотрим пример вывода навигации на основе json данных из файла mainNav.json.
Ознакомиться с содержимым файла mainNav.json можно по пути ./src/pug/data/mainNav.json.
ul
each item, index in jsonData.mainNav.items
li #{ index }
li #{ item.title }
if item.links
ul
each link in item.links
li #{ link.title }
li #{ link.link }
Вывод code
Рассмотрим пример вывода разметки в теге code.
pre
code
:special-chars
<div>
Тут разметка которая экранируется
</div>
// Короткая версия конструкции выше
:markdown-it
```html
<div>
Тут разметка которая экранируется
</div>
```
Markdown разметка
Рассмотрим пример вывода Markdown разметки.
:markdown-it(inline) **текст**
:markdown-it
Многострочный **текст**
include:markdown-it ../markdown/docs.md
:markdown-it
```js
var codeBlocks;
```