npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

generator-frontend-template

v1.0.2-0

Published

Project template generator

Downloads

6

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.