generator-frontend-template
v1.0.2-0
Published
Project template generator
Downloads
6
Maintainers
Readme
Основные возможности и используемые технологии
- Система сборки 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/[email protected]
.
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.