Gulp сборка для продуктивной верстки

ver. 1.0.0

Введение

Цель данной сборки, обеспечить комфортную работу с минимальной начальной настройкой проекта.

Основа сборки

Сборка содержит шаблонизатор 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 imagemagick graphicsmagick

npm install
# или если используете yarn
yarn install --ignore-engines

    Шаг 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

    Теперь вы готовы приступить к верстке своего проекта.

    Запуск проекта в режиме разработки.

    npm run dev

    Сборка проекта.

    npm run build

    Только запуск виртуального сервера для просмотра проекта в браузере.

    npm run proxy

    Примеры верстки с 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;
```