All Projects → andreyalexeich → Gulp Pug Starter

andreyalexeich / Gulp Pug Starter

Licence: gpl-3.0
Frontend development with pleasure. Pug + SCSS version

Programming Languages

javascript
152645 projects - #8 most used programming language
es6
455 projects
js
455 projects

Projects that are alternatives of or similar to Gulp Pug Starter

Gulp Scss Starter
Frontend development with pleasure. SCSS version
Stars: ✭ 339 (+48.68%)
Mutual labels:  webpack, gulp, babel, starter-kit, starter, development-environment, web-development, development-tools, scss, sass, bem
Pug Starter
Simple pug (jade) starter [framework] enabling faster delivery of HTML & CSS projects to a private server and/or automatic deployment of GitHub pages.
Stars: ✭ 328 (+43.86%)
Mutual labels:  starter-kit, starter, development-environment, web-development, development-tools, scss, sass, pug, bem
Nth Start Project
Startkit for HTML / CSS / JS pages layout.
Stars: ✭ 578 (+153.51%)
Mutual labels:  gulp, starter-kit, starter, scss, pug, bem
Wordpress Starter
📦 A starter template for WordPress websites
Stars: ✭ 26 (-88.6%)
Mutual labels:  webpack, gulp, babel, starter-kit, starter, sass
Tris Webpack Boilerplate
A Webpack boilerplate for static websites that has all the necessary modern tools and optimizations built-in. Score a perfect 10/10 on performance.
Stars: ✭ 1,016 (+345.61%)
Mutual labels:  webpack, babel, starter, scss, sass
Frontie Webpack
Front-end Boilerplate | Gulp 4 + Webpack 4 + Babel + ITCSS Architecture + BEM Methodology + Twig.js
Stars: ✭ 102 (-55.26%)
Mutual labels:  webpack, gulp, babel, sass, bem
Gulp Starter Kit
A simple Gulp 4 Starter Kit for modern web development.
Stars: ✭ 134 (-41.23%)
Mutual labels:  gulp, babel, scss, sass, pug
Wordless
All the power of Pug, Sass, Coffeescript and WebPack in your WordPress theme. Stop writing themes like it's 1998.
Stars: ✭ 1,374 (+502.63%)
Mutual labels:  webpack, babel, scss, sass, pug
Pug Sass Boilerplate Starter Kit
A Front-end template for building web apps or sites using Pug(Jade) and Sass
Stars: ✭ 92 (-59.65%)
Mutual labels:  gulp, development-environment, sass, pug
Webpack Starter Basic
A simple webpack starter project for your basic modern web development needs.
Stars: ✭ 552 (+142.11%)
Mutual labels:  webpack, starter-kit, starter, sass
Iceberg
Front-End Boilerplate built with React + Babel + Webpack + SASS
Stars: ✭ 144 (-36.84%)
Mutual labels:  webpack, babel, starter-kit, sass
Compile Hero
🔰Visual Studio Code Extension For Compiling Language
Stars: ✭ 169 (-25.88%)
Mutual labels:  gulp, scss, sass, pug
Bootstrap 4 Sass Gulp 4 Boilerplate
A Bootstrap 4.5.2 boilerplate with font-awesome, sass, gulp 4 tasks
Stars: ✭ 103 (-54.82%)
Mutual labels:  gulp, starter, scss, sass
Static Site Boilerplate
A better workflow for building modern static websites.
Stars: ✭ 1,633 (+616.23%)
Mutual labels:  webpack, babel, starter-kit, sass
Webpack Starter
✨ A lightweight foundation for your next webpack based frontend project.
Stars: ✭ 1,745 (+665.35%)
Mutual labels:  webpack, babel, starter-kit, sass
Glup
Some of the gulp tutorial -《gulp笔记》
Stars: ✭ 136 (-40.35%)
Mutual labels:  gulp, babel, scss, sass
Reactql
Universal React+GraphQL starter kit: React 16, Apollo 2, MobX, Emotion, Webpack 4, GraphQL Code Generator, React Router 4, PostCSS, SSR
Stars: ✭ 1,833 (+703.95%)
Mutual labels:  webpack, starter-kit, sass
Generator Phaser Plus
[🛑 DISCONTINUED] It has been a long journey but development of `generator-phaser-plus` is now over. I recommend you have a look and fork `yandeu/phaser-project-template` instead.
Stars: ✭ 148 (-35.09%)
Mutual labels:  webpack, gulp, babel
Webpack Encore
A simple but powerful API for processing & compiling assets built around Webpack
Stars: ✭ 1,975 (+766.23%)
Mutual labels:  webpack, babel, sass
Hugo theme pickles
Modern, Simple and beautiful Hugo theme
Stars: ✭ 168 (-26.32%)
Mutual labels:  gulp, babel, sass

gulp-pug-starter

GitHub release dependencies Status devDependencies Status GitHub stars GitHub watchers

🔥 Особенности

  • именование классов по БЭМ
  • используется БЭМ-структура
  • используются препроцессоры Pug и SCSS
  • используется транспайлер Babel для поддержки современного JavaScript (ES6) в браузерах
  • используется Webpack для сборки JavaScript-модулей
  • используется CSS-сетка smart-grid на основе Bootstrap для быстрой адаптивной вёрстки
  • используется жёсткий кодгайд
  • используется проверка кода на ошибки перед коммитом

🛠 Установка

  • установите NodeJS (если требуется) и Yarn
  • скачайте сборку в консоли с помощью Git: git clone https://github.com/andreyalexeich/gulp-pug-starter.git
  • установите gulp глобально: yarn global add gulp-cli
  • установите bem-tools-core глобально: yarn global add bem-tools-core
  • перейдите в скачанную папку со сборкой: cd gulp-pug-starter
  • скачайте необходимые зависимости: yarn
  • чтобы начать работу, введите команду: yarn run dev (режим разработки)
  • чтобы собрать проект, введите команду yarn run build (режим сборки)

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

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

gulp-pug-starter
├── dist
├── gulp-tasks
├── src
│   ├── blocks
│   ├── fonts
│   ├── img
│   ├── js
│   ├── styles
│   ├── views
│   └── .htaccess
├── gulpfile.babel.js
├── webpack.config.js
├── package.json
├── .babelrc.js
├── .bemrc.js
├── .eslintrc.json
├── .stylelintrc
├── .stylelintignore
└── .gitignore
  • Корень папки:
    • .babelrc.js — настройки Babel
    • .bemrc.js — настройки БЭМ
    • .eslintrc.json — настройки ESLint
    • .gitignore – запрет на отслеживание файлов Git'ом
    • .stylelintrc — настройки Stylelint
    • .stylelintignore – запрет на отслеживание файлов Stylelint'ом
    • gulpfile.babel.js — настройки Gulp
    • webpack.config.js — настройки Webpack
    • package.json — список зависимостей
  • Папка src - используется во время разработки:
    • БЭМ-блоки и компоненты: src/blocks
    • шрифты: src/fonts
    • изображения: src/img
    • JS-файлы: src/js
    • страницы сайта: src/views/pages
    • SCSS-файлы: src/styles
    • служебные Pug-файлы: src/views
    • конфигурационный файл веб-сервера Apache с настройками gzip (сжатие без потерь): src/.htaccess
  • Папка dist - папка, из которой запускается локальный сервер для разработки (при запуске yarn run dev)
  • Папка gulp-tasks - папка с Gulp-тасками

⌨️ Команды

  • yarn run lint:styles - проверить SCSS-файлы. Для VSCode необходимо установить плагин. Для WebStorm или PHPStorm необходимо включить Stylelint в Languages & Frameworks - Style Sheets - Stylelint (ошибки будут исправлены автоматически при сохранении файла)
  • yarn run lint:styles --fix - исправить ошибки в SCSS-файлах
  • yarn run lint:scripts - проверить JS-файлы
  • yarn run lint:scripts --fix - исправить ошибки в JS-файлах
  • yarn run dev - запуск сервера для разработки проекта
  • yarn run build - собрать проект с оптимизацией без запуска сервера
  • yarn run build:views - скомпилировать Pug-файлы
  • yarn run build:styles - скомпилировать SCSS-файлы
  • yarn run build:scripts - собрать JS-файлы
  • yarn run build:images - собрать изображения
  • yarn run build:webp - сконвертировать изображения в формат .webp
  • yarn run build:sprites- собрать спрайты
  • yarn run build:fonts - собрать шрифты
  • yarn run build:favicons - собрать фавиконки
  • yarn run build:gzip - собрать конфигурацию Apache
  • yarn run bem-m - добавить БЭМ-блок
  • yarn run bem-c - добавить компонент

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

Компонентный подход к разработке сайтов

  • каждый БЭМ-блок имеет свою папку внутри src/blocks/modules
  • папка одного БЭМ-блока содержит в себе один Pug-файл, один SCSS-файл и один JS-файл (если у блока используется скрипт)
    • Pug-файл блока импортируется в файл src/views/index.pug (или в необходимый файл страницы, откуда будет вызываться блок)
    • SCSS-файл блока импортируется в файл src/blocks/modules/_modules.scss
    • JS-файл блока импортируется в src/js/import/modules.js

Пример структуры папки с БЭМ-блоком:

blocks
├── modules
│   ├── header
│   │   ├── header.pug
│   │   ├── header.js
│   │   ├── header.scss

Чтобы вручную не создавать соответствующие папку и файлы, достаточно в консоли прописать следующие команды:

  • yarn run bem-m my-block - для создания БЭМ-блока в src/block/modules (для основных БЭМ-блоков), где my-block - имя БЭМ-блока;
  • yarn run bem-с my-component - для создания компонента в src/blocks/components (для компонентов), где my-component - имя компонента

Компоненты

  • компоненты (например, иконки, кнопки) оформляются в Pug с помощью примесей
  • каждый компонент имеет свою папку внутри src/blocks/components
  • папка одного компонента содержит в себе один Pug-файл, один SCSS-файл и один JS-файл (если у компонента используется скрипт)
    • Pug-файл компонента импортируется в файл главной страницы src/views/index.pug (или в необходимый файл страницы, откуда будет вызываться компонент)
    • SCSS-файл компонента импортируется в файл src/blocks/components/_components.scss
    • JS-файл компонента импортируется в файл src/js/import/components.js

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

  • страницы проекта находятся в папке src/views/pages
    • каждая страница (в том числе главная) наследует шаблон src/views/layouts/default.pug
    • главная страница: src/views/index.pug

Шрифты

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

Изображения

  • изображения находятся в папке src/img
    • изображение для генерации фавиконок должно находиться в папке src/img/favicon и иметь размер не менее 1024px x 1024px
    • изображения автоматически конвертируются в формат .webp. Подробная информация по использованию тут.

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

  • все сторонние библиотеки устанавливаются в папку node_modules
    • для их загрузки воспользуйтеcь командой yarn add package_name
    • для подключения JS-файлов библиотек импортируйте их в самом начале JS-файла БЭМ-блока (то есть тот БЭМ-блок, который использует скрипт), например:
    import $ from "jquery";
    
    • для подключения стилевых файлов библиотек импортируйте их в файл src/styles/vendor/_libs.scss
    • JS-файлы и стилевые файлы библиотек самостоятельно изменять нельзя

⚠️ Если в вашем проекте используется несколько библиотек, которые необходимо подключать на нескольких страницах, во избежании ошибок нужно:

  • по пути src/js/import создать папку pages
  • в папке pages создать js-файл для страницы, например, pageA.js, и импортировать туда библиотеку, которая будет использоваться только на этой странице
    • аналогично проделать шаг для дополнительных страниц
  • в файле webpack.config.js в точку входа добавить js-файлы страниц, пример:
entry: {
    main: "./src/js/index.js",
    pageA: "./src/js/import/pages/pageA.js",
    pageB: "./src/js/import/pages/pageB.js"
}
  • подключить скомпилированные js-файлы на необходимых страницах

#️⃣ CSS-сетка smart-grid

В сборщик включена CSS-сетка smart-grid от Дмитрия Лаврика. Она позволяет избавиться от лишних классов в разметке за счёт использования примесей в SCSS и ускоряет адаптивную вёрстку. Конфигурация уже настроена в соответствии с сеткой Bootstrap. Инструкция по использованию здесь.

👉 Нужен SCSS без Pug?

Используйте эту сборку.

💛 Нравится проект?

Сообщайте мне о багах, ставьте звёздочку в правом верхнем углу, задонатьте мне на пиво 🍺

✉️ Контакты

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected]