Generator-frontend-template NPM

Основные возможности и используемые технологии

Система сборки Gulp
Оптимизация изображений.
Генерация PNG- и SVG-спрайтов.
Шаблонизация с помощью Nunjucks.
CSS-препроцессор SCSS и Autoprefixer.
ES6.
Встроенное определение устройства, браузера и операционной системы пользователя.
Проверка кода линтерами (htmlhint, stylelint, ESLint).
Browsersync, автоматическое обновление страницы при разработке.
Возможность быстро создать архив проекта.
Множество дополнительных параметров сборки.

Минимальные требования

node >= 9.5.0
npm >= 5.6.0
gulp >= 4.0.0
gulp-cli >= 2.0.1

Gulp-задачи

default — основная задача, запускает build, watch и serve.
build — сборка всех файлов, запускает задачи copy, images, sprites:png, sprites:svg, html, scss, js.
watch — запускает слежение за файлами, так что при изменении они автоматически пересобираются.
serve — запускает сервер Browsersync.
html — запускает сборку Nunjucks-шаблонов.
images — запускает сборку изображений.
sprites:png — запускает генерацию PNG-спрайтов.
sprites:svg — запускает генерацию SVG-спрайтов.
scss — запускает сборку стилей.
js — запускает сборку скриптов.
copy — запускает сборку дополнительных ресурсов.
lint — последовательно запускает линтеры lint:js, lint:html, lint:scss.
lint:js — проверяет JavaScript-файлы линтером ESLint.
lint:html — проверяет Html-файлы линтером htmlhint.
lint:scss — проверяет SCSS-файлы линтером stylelint.
optimize:svg — оптимизирует и форматирует код SVG-файлов в папке src/images.
optimize:images — оптимизирует изображения в папке src/images.
share — Настройка динамических шерингов для SPA.
zip — создает архив проекта.

Дополнительные параметры:

--ci — включает режим CI (--no-cache --no-notify --no-open --throw-errors).
--fix — автоматически исправляет ошибки при проверке кода линтером (только для lint:js).
--minify — включает минификацию файлов (только для sprites:svg, html, scss и js).
--minify-html — включает минификацию HTML-файлов (имеет приоритет перед --minify).
--minify-css — включает минификацию CSS-файлов (имеет приоритет перед --minify).
--minify-js — включает минификацию JS-файлов (имеет приоритет перед --minify).
--minify-svg — включает минификацию SVG-файлов (имеет приоритет перед --minify).
--no-cache — отключает кэширование (только для copy, images и html).
--no-debug — отключает отладочный вывод списка обрабатываемых файлов.
--no-notify — отключает уведомления об ошибках.
--no-open — отключает автоматический запуск браузера (только для serve).
--port — задает порт сервера (только для serve).
--spa — включает режим одностраничного приложения (только для serve).
--throw-errors — прерывает сборку при возникновении ошибки.

Структура папок и файлов

ninelines-template
├── src
│   ├── images
│   │   └── sprites
│   │       ├── png
│   │       │   └── .keep
│   │       └── svg
│   │           └── .keep
│   ├── js
│   │   ├── components
│   │       └── .keep
│   │   ├── pages
│   │       └── .keep
│   │   ├── vendor
│   │   │   └── .keep
│   │   ├── main.js
│   │   └── vendor.js
│   ├── nunjucks
│   │   ├── components
│   │       └── .keep
│   │   ├── partials
│   │   │   ├── analytics
│   │   │   │   └── google.njk
│   │   │   │   └── yandex.njk
│   │   │   ├── mixins
│   │   │   │   └── icon.njk
│   │   │   └── links.njk
│   │   │   └── meta.njk
│   │   │   └── mixins.njk
│   │   ├── base.njk
│   │   ├── data.json
│   ├── pages
│   │   └── .keep
│   ├── resources
│   │   └── fonts
│   │       └── .keep
│   ├── scss
│   │   ├── components
│   │       └── .keep
│   │   ├── functions
│   │   │   └── _sprites.scss
│   │   ├── mixins
│   │   │   ├── _clearfix.scss
│   │   │   ├── _retina.scss
│   │   │   ├── _sprites.scss
│   │   │   ├── _triangle.scss
│   │   │   └── _visually-hidden.scss
│   │   ├── pages
│   │       └── .keep
│   │   ├── vendor
│   │   │   └── .keep
│   │   ├── _base.scss
│   │   ├── _commons.scss
│   │   ├── _fonts.scss
│   │   ├── _functions.scss
│   │   ├── _mixins.scss
│   │   ├── _sprites.hbs
│   │   ├── _sprites.scss
│   │   ├── _variables.scss
│   │   ├── _vendor.scss
│   │   └── main.scss
│   └── index.html(nunjucks/njk)
├── .babelrc
├── .editorconfig
├── .eslintignore
├── .eslintrc
├── .gitignore
├── .npmrc
├── .htmlhintrc.json
├── .stylelintignore
├── .stylelintrc
├── gulpfile.js
├── package.json
├── README.md
└── webpack.config.js

`src`

В папке src хранятся исходные файлы проекта.

`src/images`

Папка images предназначена для хранения изображений. При сборке файлы из данной папки попадают в build/images.

`src/images/sprites`

Папка src/images/sprites предназначена для хранения векторных (SVG) и растровых (PNG) иконок.

`src/images/sprites/png`

Папка src/images/sprites/png предназначена для хранения растровых иконок. При сборке файлы из данной папки объединяются в два спрайта: build/images/sprites.png и build/images/sprites@2x.png.

`src/images/sprites/svg`

Папка src/images/sprites/svg предназначена для хранения векторных иконок. При сборке файлы из данной папки объединяются в один спрайт: build/images/sprites.svg.

`src/js`

Папка src/js предназначена для хранения скриптов.

`src/js/components`

Папка src/js/components предназначена для хранения скриптов отдельных компонентов, которые можно переиспользовать в любом месте проекта.

`src/js/pages`

Папка src/js/pages предназначена для хранения скриптов отдельной страницы, котроые не будут использоваться в других местах проекта.

`src/js/vendor`

Папка src/js/vendor предназначена для хранения скриптов сторонних библиотек, которых нет в репозитории npm.

`src/js/main.js`

Файл src/js/main.js предназначен для хранения основной логики сайта. При сборке данный файл попадает в build/js.

`src/js/vendor.js`

Файл src/js/vendor.js предназначен для подключения сторонних библиотек.

При сборке данный файл попадет в build/js.

`src/nunjucks`

Папка src/nunjucks предназначена для хранения шаблонов.

`src/nunjucks/components`

Папка src/js/components предназначена для хранения отдельных компонентов страниц, которые можно переиспользовать в любом месте проекта.

`src/nunjucks/partials`

Папка src/nunjucks/partials предназначена для хранения базовых настроек проекта.

`src/nunjucks/analytics`

Папка src/nunjucks/analytics предназначена для хранения настроек аналитики.

google / yandex Обратите внимание что эти файлы содержат уникальные id метрики которые можно прописать в файле data.json

`src/nunjucks/partials/mixins`

Папка src/nunjucks/partials/mixins предназначена для хранения Nunjucks-миксинов.

`src/nunjucks/base.njk`

В файле src/nunjucks/base.njk хранится базовый шаблон страниц сайта.

`src/nunjucks/data.json`

Файл src/nunjucks/data.json предназначен для настройки глобальных переменных для Nunjucks-шаблонов.

`src/pages`

Папка src/pages предназначена для хранения Html(Nunjucks) файлов страниц.

Пример, мы создали файл articles.njk и папку articles c внутренней статьеё article-1.njk внутри папки pages, на выходе мы получим следующее

build
├── articles
│   └── article-1.html
└── articles.html

`src/resources`

Папка src/resources предназначена для хранения различных файлов проекта. При сборке файлы из данной папки попадают в build.

`src/resources/fonts`

Папка src/resources/fonts предназначена для хранения шрифтов. При сборке файлы из данной папки попадают в build/fonts.

`src/scss`

Папка src/scss предназначена для хранения стилей.

`src/scss/functions`

Папка src/scss/functions предназначена для хранения SCSS-функций.

`src/scss/mixins`

Папка src/scss/mixins предназначена для хранения SCSS-миксин.

`src/scss/vendor`

Папка src/scss/vendor предназначена для хранения стилей сторонних библиотек, которых нет в репозитории npm.

`src/scss/_base.scss`

Файл src/scss/_base.scss предназначен для хранения базовых стилей.

`src/scss/_commons.scss`

Файл src/scss/_commons.scss предназначен для хранения базовых стилей.

`src/scss/_fonts.scss`

Файл src/scss/_fonts.scss предназначен для подключения шрифтов.

`src/scss/_functions.scss`

Файл src/scss/_functions.scss предназначен для подключения функций из папки src/scss/functions.

`src/scss/_mixins.scss`

Файл src/scss/_mixins.scss предназначен для подключения миксин из папки src/scss/mixins.

`src/scss/_sprites.hbs`

src/scss/_sprites.hbs — шаблон, на основе которого генерируется содержимое файла src/scss/_sprites.scss.

`src/scss/_sprites.scss`

Файл src/scss/_sprites.scss предназначен для работы с PNG-спрайтами. Содержимое данного файла автоматически генерируется на основе шаблона src/scss/_sprites.hbs и иконок из папки src/images/sprites/png.

`src/scss/_variables.scss`

Файл src/scss/_variables.scss предназначен для хранения SCSS-переменных.

`src/scss/_vendor.scss`

Файл src/scss/_vendor.scss предназначен для подключения стилей сторонних библиотек.

`src/scss/main.scss`

Файл src/scss/main.scss предназначен для хранения основных стилей сайта. При сборке данный файл преобразуется в CSS и сохраняется в build/css вместе с файлом main.css.map.