gulp-pug-template

Установка

• установите Node.js (если требуется) и Yarn
• скачайте сборку в консоли с помощью Git: git clone https://github.com/Apnoea/gulp-pug-template.git
• установите gulp глобально: yarn global add gulp-cli
• перейдите в скачанную папку со сборкой: cd gulp-pug-template
• скачайте необходимые зависимости: yarn
• чтобы начать работу, введите команду: yarn start (режим разработки)
• чтобы собрать проект, введите команду yarn build (режим сборки)

Если вы всё сделали правильно, у вас должен открыться браузер с локальным сервером. Режим сборки предполагает оптимизацию проекта: сжатие изображений, минифицирование CSS и JS-файлов для загрузки на сервер.

Файловая структура

gulp-pug-template
├── build
├── gulp-tasks
├── src
│   ├── fonts
│   ├── images
│   ├── js
│   ├── pages
│   └── styles
├── .editorconfig
├── .eslintignore
├── .eslintrc.json
├── .gitattributes
├── .gitignore
├── .pug-lint.json
├── .stylelintrc.json
├── gulpfile.js
├── package.json
└── webpack.config.js

• Папка build - папка, из которой запускается локальный сервер для разработки (при запуске yarn start)
• Папка gulp-tasks - папка с Gulp-тасками
• Папка src - используется во время разработки:
  • шрифты: src/fonts
  • изображения: src/images
  • JS-файлы: src/js
  • страницы сайта: src/pages
  • SCSS-файлы: src/styles

Команды

• yarn start - запуск сервера для разработки проекта
• yarn build - собрать проект с оптимизацией без запуска сервера
• yarn script - собрать только js

Рекомендации по использованию

Страницы проекта

• страницы проекта находятся в папке src/pages
  • главная страница: src/pages/index.pug
• блоки страниц находятся в папке src/pages/includes

Шрифты

• шрифты находятся в папке src/fonts
  • используйте форматы .woff2 и .woff
  • шрифты подключаются в файле src/styles/utils/fonts.scss
  • сконвертировать локальные шрифты можно с помощью данного сервиса

Изображения

• изображения находятся в папке src/images
  • изображения автоматически минифицируются с сохранением структуры папок
• из изображений формата .svg формируется спрайт build/img/sprite.svg
  • отдельные .svg доступны по пути build/img/svgs
  • для вложенных изображений создается префикс с названием папки, к примеру main--icon_circle.svg

Сторонние библиотеки

• все сторонние библиотеки устанавливаются в папку node_modules
  • для их загрузки воспользуйтеcь командой yarn add package_name
  • для подключения JS-файлов библиотек импортируйте их в самом начале JS-файла, например:

  import $ from 'jquery'

  • для подключения стилевых файлов библиотек импортируйте их в файл src/styles/layouts/style.scss
  • JS-файлы и стилевые файлы библиотек самостоятельно изменять нельзя

Контакты

• Telegram: @Alex K