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

Система сборки 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.

`src/index.html(nunjucks/njk)`

src/index.html(nunjucks/njk) — шаблон главной страницы. При сборке все nunjucks-файлы из папки src преобразуются в HTML и сохраняются в build.

`.babelrc`

.babelrc — файл настроек JavaScript-транспайлера Babel.

`.editorconfig`

.editorconfig — файл настроек редактора.

`.eslintignore`

.eslintignore — файл настроек ESLint для игнорирования файлов.

`.eslintrc`

.eslintrc — файл настроек ESLint.

`.gitignore`

.gitignore — файл настроек Git для игнорирования файлов.

`.npmrc`

.npmrc — файл настроек npm.

`.htmlhintrc.json`

.htmlhintrc.json — файл настроек htmlhint.

`.stylelintignore`

.stylelintignore — файл настроек stylelint для игнорирования файлов.

`.stylelintrc`

.stylelintrc — файл настроек stylelint.

`gulpfile.js`

gulpfile.js — основной файл сборки, содержащий Gulp-задачи.

`package.json`

package.json — файл, содержащий базовую информацию о проекте и список требуемых библиотек.

`README.md`

README.md — описание проекта.

`webpack.config.js`

webpack.config.js — файл настроек webpack.

generator-frontend-template

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

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

Gulp-задачи

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

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

src

src/images

src/images/sprites

src/images/sprites/png

src/images/sprites/svg

src/js

src/js/components

src/js/pages

src/js/vendor

src/js/main.js

src/js/vendor.js

src/nunjucks

src/nunjucks/components

src/nunjucks/partials

src/nunjucks/analytics

src/nunjucks/partials/mixins

src/nunjucks/base.njk

src/nunjucks/data.json

src/pages

src/resources

src/resources/fonts

src/scss

src/scss/functions

src/scss/mixins

src/scss/vendor

src/scss/_base.scss

src/scss/_commons.scss

src/scss/_fonts.scss

src/scss/_functions.scss

src/scss/_mixins.scss

src/scss/_sprites.hbs

src/scss/_sprites.scss

src/scss/_variables.scss

src/scss/_vendor.scss

src/scss/main.scss

src/index.html(nunjucks/njk)

.babelrc

.editorconfig

.eslintignore

.eslintrc

.gitignore

.npmrc

.htmlhintrc.json

.stylelintignore

.stylelintrc

gulpfile.js

package.json

README.md

webpack.config.js

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators