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

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