Update documentation

changelog.md

@@ -1,81 +1,83 @@
-0.1.0 - Первый релиз
+0.1.0 – Первый релиз
 
-0.2.0 - Добавлен ESLint
+0.2.0 – Добавлен ESLint
 
-0.2.1 - Внесение исправлений
+0.2.1 – Внесение исправлений
 
-0.2.2 - Внесение исправлений, переход на стрелочные функции
+0.2.2 – Внесение исправлений, переход на стрелочные функции
 
-0.2.3 - Добавлен плагин `merge-media-queries`
+0.2.3 – Добавлен плагин `merge-media-queries`
 
-0.3.0 - Добавлен более удобный способ импорта JS-библиотек
+0.3.0 – Добавлен более удобный способ импорта JS-библиотек
 
-0.3.1 - Добавлен шаблон **Pug** для более быстрого старта
+0.3.1 – Добавлен шаблон **Pug** для более быстрого старта
 
-0.3.2 - Исправление ошибок
+0.3.2 – Исправление ошибок
 
-0.3.3 - Исправление ошибок работы тасков JS
+0.3.3 – Исправление ошибок работы тасков JS
 
-0.3.4 - Исправления недочётов
+0.3.4 – Исправления недочётов
 
-0.3.5 - Убран плагин минификации SVG из-за проблем с изображением на выходе
+0.3.5 – Убран плагин минификации SVG из-за проблем с изображением на выходе
 
-0.3.6 - Исправлен таск `default` для большей производительности
+0.3.6 – Исправлен таск `default` для большей производительности
 
-0.3.7 - Добавлена возможность подключать файлы js в файл common.js. Минорные исправления
+0.3.7 – Добавлена возможность подключать файлы js в файл common.js. Минорные исправления
 
-0.3.8 - Исправление ошибок предыдущей версии
+0.3.8 – Исправление ошибок предыдущей версии
 
-0.3.9 - Исправление ошибок предыдущих версий, общие улучшения
+0.3.9 – Исправление ошибок предыдущих версий, общие улучшения
 
-0.4.0 - Добавлен Babel для транспиляции ES6 в ES5
+0.4.0 – Добавлен Babel для транспиляции ES6 в ES5
 
-0.5.0 - Добавлен плагин для генерации критического CSS
+0.5.0 – Добавлен плагин для генерации критического CSS
 
-0.5.1 - Слегка изменена структура папок. Добавлен таск `misc` для удаления лишних файлов (`.gitkeep`, `changelog.md` и `readme.md`)
+0.5.1 – Слегка изменена структура папок. Добавлен таск `misc` для удаления лишних файлов (`.gitkeep`, `changelog.md` и `readme.md`)
 
-0.5.2 - Папки `modules` были преименованы в `components`, т.к. лучше отражают смысл названия
+0.5.2 – Папки `modules` были преименованы в `components`, т.к. лучше отражают смысл названия
 
-0.5.3 - Теперь `gulpfile.js` полностью прокомментирован и по нему легко ориентироваться даже новичку!
+0.5.3 – Теперь `gulpfile.js` полностью прокомментирован и по нему легко ориентироваться даже новичку!
 
-0.5.4 - SASS и JS собираются в продакшен без sourcemap'ов, чтобы файлы весили не так много. Минорные изменения
+0.5.4 – SASS и JS собираются в продакшен без sourcemap'ов, чтобы файлы весили не так много. Минорные изменения
 
-0.5.5 - Оптимизирован таск SASS, а так же другие мелкие доработки
+0.5.5 – Оптимизирован таск SASS, а так же другие мелкие доработки
 
-0.6.0 - Большое обновление: добавлена генерация Service Worker, manifest.json, секция head в index.pug была расширена, обновлена документация, а так же внесены мелкие правки. Теперь разрабатывать прогрессивное веб-приложение с GPS ещё проще
+0.6.0 – Большое обновление: добавлена генерация Service Worker, manifest.json, секция head в index.pug была расширена, обновлена документация, а так же внесены мелкие правки. Теперь разрабатывать прогрессивное веб-приложение с GPS ещё проще
 
-0.6.1 - Удалён таск `css`, теперь это просто `sass`
+0.6.1 – Удалён таск `css`, теперь это просто `sass`
 
-0.6.2 - Исправлены метаданные
+0.6.2 – Исправлены метаданные
 
-0.6.3 - Service Worker собирается только в папку продакшена, чтобы не мешать разработке, кэшируя всё подряд
+0.6.3 – Service Worker собирается только в папку продакшена, чтобы не мешать разработке, кэшируя всё подряд
 
-0.6.4 - Исправлен пример подключения стилей библиотек
+0.6.4 – Исправлен пример подключения стилей библиотек
 
-0.6.5 - Генерация критического CSS перенесена в продакшен, чтобы не мешать при разработке
+0.6.5 – Генерация критического CSS перенесена в продакшен, чтобы не мешать при разработке
 
-0.6.6 - Исправление ошибок `changelog.md`
+0.6.6 – Исправление ошибок `changelog.md`
 
-0.7.0 - Переработана структура проекта. Переход на компонентый подход ([подробнее](https://github.com/nmihalyov/gulp-pure-start/blob/master/readme.md#Структура))
+0.7.0 – Переработана структура проекта. Переход на компонентый подход ([подробнее](https://github.com/nmihalyov/gulp-pure-start/blob/master/readme.md#Структура))
 
-0.7.1 - Удалён таск `uncss`, вызывающий проблемы при сборке проекта в production build
+0.7.1 – Удалён таск `uncss`, вызывающий проблемы при сборке проекта в production build
 
-0.7.2 - Удалён Service Worker за ненадобностью в данной сборке (исправление ошибок)
+0.7.2 – Удалён Service Worker за ненадобностью в данной сборке (исправление ошибок)
 
-0.8.0 - Настройка ESLint, исправление незначительных ошибок, прочее
+0.8.0 – Настройка ESLint, исправление незначительных ошибок, прочее
 
-0.9.0 - Апдейт до Gulp 4, переработка структуры (сервер запускается из папки `build`, в папке `dev` только рабочие файлы, билд в продакшен находится в папке `prod`)
+0.9.0 – Апдейт до Gulp 4, переработка структуры (сервер запускается из папки `build`, в папке `dev` только рабочие файлы, билд в продакшен находится в папке `prod`)
 
-0.9.1 - Отказ от `bower` в пользу `yarn`
+0.9.1 – Отказ от `bower` в пользу `yarn`
 
-1.0.0 - Отладка сборки. Релиз
+1.0.0 – Отладка сборки. Релиз
 
-1.0.1 - Фикс отсутствующей зависимости
+1.0.1 – Фикс отсутствующей зависимости
 
-1.1.0 - Правки файла манифеста. Подключение библиотеки для сбрасывания стилей, а также дефолтные стили в `_base.sass` и стили для подключения шрифтов.
+1.1.0 – Правки файла манифеста. Подключение библиотеки для сбрасывания стилей, а также дефолтные стили в `_base.sass` и стили для подключения шрифтов.
 
 1.2.0 – Более эффективная загрузка скриптов с `defer` в теге `head`. Перенос манифеста в `build`. Исправление ошибки с загрузкой *sanitize.css*
 
 1.2.1 – Исправление ошибок
 
-1.2.2 – Исправление ошибки минификации ES6 кода, обновление версий зависимостей
+1.2.2 – Исправление ошибки минификации ES6 кода, обновление версий зависимостей
+
+1.2.3 – Обновление документации

dev/js/common.js

@@ -2,4 +2,4 @@ window.onload = () => {
 
   @@include('../components/component/component.js')
 
-}
+}

dev/sass/assets/_base.sass

@@ -1,4 +1,8 @@
+*
+  box-sizing: border-box
+
 body
+  width: 100%
   font:
     family: 'Proxima Nova', Helvetica, sans-serif
     size: 18px

dev/sass/style.sass

@@ -7,5 +7,8 @@
 @import 'assets/fonts'
 @import 'assets/base'
 
+// UI components
+@import '../components/_ui/component/component'
+
 // components
-// @import '../components/component/component'
+@import '../components/component/component'

gulpfile.js

@@ -1,7 +1,7 @@
 /*
- * Gulp Pure Start © 2017 – 2019, Nikita Mihalyov <nikita.mihalyov@gmail.com>
+ * Gulp Pure Start © 2017 – 2020, Nikita Mihalyov <nikita.mihalyov@gmail.com>
  * ISC Licensed
- * v1.2.2
+ * v1.2.3
  */
 
 'use strict';
@@ -227,7 +227,7 @@ gulp.task('default', gulp.parallel('sass', 'img', 'pug', 'jsLibs', 'scripts', 'f
 
 // Удаляем все лишние файлы: '.gitkeep', 'changelog.md' и 'readme.md'
 gulp.task('misc', async () => {
-	return del.sync(['**/.gitkeep', 'changelog.md', 'readme.md']);
+	return del.sync(['**/.gitkeep', '.assets', 'changelog.md', 'readme.md']);
 });
 
 // Очищаем директорию продакшен билда

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "gulp-pure-start",
-	"version": "1.2.2",
+	"version": "1.2.3",
 	"description": "Start your project with 'Gulp Pure Start' easily then ever!",
 	"main": "gulpfile.js",
 	"keywords": [

readme.md

@@ -1,7 +1,7 @@
 # Gulp Pure Start
 
-v1.2.2
-![Gulp Pure Start logo](https://drive.google.com/uc?export=view&id=0B7lALWrgWMxpWkJ6a09MdnVYdmc)
+![Gulp Pure Start logo](.assets/logo.png)
+v1.2.3
 
 **Gulp Pure Start** позволяет легко и быстро начать работу над проектом с использованием сборщика Gulp.
 
@@ -27,7 +27,7 @@ v1.2.2
  7. Для компиляции проекта в продакшен выполните команду **`gulp prod`**
 
 ## Структура
- ![Gulp Pure Start structure](https://drive.google.com/uc?export=view&id=0B7lALWrgWMxpMGRPWGRhZnEwR28)
+![Gulp Pure Start structure](.assets/structure.png)
 
 Стуктура проекта предельно проста:
  + В корневой папке:
@@ -50,20 +50,38 @@ v1.2.2
 
 Выглядит это примерно так:
 
-![Gulp Pure Start components](https://drive.google.com/uc?export=view&id=0B7lALWrgWMxpd0Y4dnRnZXMwYmc)
+![Gulp Pure Start components](.assets/components.png)
 
-И подключение компонентов для каждой реализации:
+Подключение компонентов для каждой реализации:
 
-![Gulp Pure Start components usage](https://drive.google.com/uc?export=view&id=0B7lALWrgWMxpR1pBc01oejg5N3c)
+**PUG**:
+
+*Сам компонент является миксином*
+
+![Gulp Pure Start header component](.assets/header-component.png)
+
+*Подключение компонента-миксина*
+
+![Gulp Pure Start component pug](.assets/pug.png)
+
+**SASS**:
+
+![Gulp Pure Start component sass](.assets/sass.png)
+
+**JavaScript**:
+
+![Gulp Pure Start component js](.assets/js.png)
 
 ## Рекомендации к использованию
-Чтобы работа над проектом с **Gulp Pure Start** была легче и быстрее, рекомендую придерживаться следующих правил:
+Чтобы работа над проектом с **Gulp Pure Start** была легче и быстрее, рекомендуется придерживаться следующих правил:
 1. Придерживайтесь изначальной структуры файлов/папок
 2. **HTML** файлы по умолчанию компилируются в корень **build**, при необходимости можно изменить в  **gulpfile.js**: таск pug, строка **`.pipe(gulp.dest(${build}))`**
 3. Все библиотеки устанавливаются в **node_modules**. Для их подключения используйте файл **js/libs.js** c директивой **@@include** (напр. **`@@include('../../node_modules/jquery/dist/jquery.js')`**), точно также можно импортировать несколько файлов JS в один результирующий для более удобной архитектуры (eсли вам надо подключить SASS/CSS, то подключайте их в **_libs.sass** (который нужно импортировать в style.sass или подключать библиотеки сразу в нём)
 4. По-умолчанию из SASS-файлов компилируется только **style.sass**, остальные файлы стилей следует импротировать в него, или заменить строку таска **sass** **`return gulp.src('dev/sass/style.sass')`** на **`return gulp.src('dev/sass/*.sass')`**
 5. В верстку стоит подключать **минифицированные файлы** — style.min.css/common.min.js/libs.min.js, т.к. именно **они попадают затем в билд!**
 6. Существует шаблон Pug для более быстрого старта - **dev/pug/index.pug**
+7. В папке **dev/pug/assets** находятся следующие вспомогательные файлы разметки: **_base.pug** – базовые стили для всего проекта, **_links.pug** – содержит все теги link для раздела head, **_metas.pug** – содержит все теги meta для раздела head, **_og.pug** – метатеги OpenGraph, **_scripts.pug** – подключение скриптов
+8. В папке **dev/sass/assets** находятся следующие вспомогательные файлы стилей: **_base.sass** – базовые стили для всего проекта, **_fonts.sass** – подключение всех шрифтов, **_mixins.sass** – файл для миксинов, **_vars.sass** – глобальные переменные для стилей проекта
 
 ### [Патчноут](https://github.com/nmihalyov/gulp-pure-start/blob/master/changelog.md)