Сборка GULP

Используется gulp версии 4.0.

Для начала работы

Должна быть установлена последняя версия Gulp CLI tools глобально (подробнее - GitHub )

1. git clone <this repo>
2. yarn init -y
3. yarn install
4. yarn upgrade
5. git add .
6. git commit -m
7. git remote set-url origin <new repo>
8. git remote -v
9. git push -u origin master

Примечания

1. при ошибке Error: ENOENT: no such file or directory, open \node_modules\svgo.svgo.yml выполнить yarn upgrade svgo

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

├── source/                       # Исходники
│   ├── js                        # Скрипты
│   │   └── app.js                # Главный скрипт
│   ├── style                     # Стили, файлы в формате .scss
│   │   ├── _helpers              # Стили, которые должны быть подключены 
│   │   │   │                     #   в самом верху файла app.scss
│   │   │   ├── _var.scss         # Переменные
│   │   │   ├── fonts.scss        # Шрифты: подключение, примеси и шаблоны
│   │   │   ├── mixins.scss       # Миксины, которые используются в файлах 
│   │   │   │                     #   из папок blocks и common
│   │   │   ├── media.scss        # Миксины мадиа-запросов
│   │   │   ├── global.scss       # Базовые стили для основных тегов
│   │   │   └── helpercls.scss    # Вспомогательные классы
│   │   ├── blocks                # Стили блоков страниц (по принципам методологии БЭМ)
│   │   ├── common                # Стили для элементов, которые могут
│   │   │                         #   использоваться в разных блоках
│   │   │
│   │   │                         # Для удобства навигации, файлы стилей 
│   │   │                         #   в папках blocks и common должны по возможности
│   │   │                         #   соответсвовать файлам в аналогичных папках 
│   │   │                         #   раздела template
│   │   │
│   │   └── app.scss              # Главный стилевой файл, 
│   │                             #   в которые импортируются все остальные стили
│   ├── template                  # Разметка, файлы в формате .pug
│   │   ├── pages                 # Страницы
│   │   ├── mixins                # Миксины
│   │   ├── blocks                # Блоки страниц (по принципам методологии БЭМ)
│   │   ├── common                # Элементы, которые могут использоваться
│   │   │                         #   в разных блоках (например, меню или логотип)
│   │   └── _template.pug         # Шаблоны страниц расположены в корне каталога template
│   ├── fonts                     # Шрифты
│   ├── images                    # Все изображения, за исключением тех,
│   │                             #   из которых нужно сгенерировать спрайты
│   ├── sprite                    # Иконки для генерации спрайтов
│   └── video                     # Видео
│
├── gulp/                         # Файлы сборщика (gulpfile.js)
│   ├── paths                     # Пути для сборки проекта
│   │   ├── app.js                # Пути к пользовательским скриптам
│   │   ├── js.foundation.js      # Пути к сторонним скриптам,
│   │   │                         #   например библиотекам или плагинам
│   │   ├── css.foundation.js     # Пути к сторонним файлам стилей, 
│   │   │                         #   таким как normalize.css или стили плагинов
│   │   └── tasks.js              # Пути к скриптам с задачами для gulpfile.js
│   ├── tasks                     # Подключаемые скрипты с задачами для gulpfile.js
│   │   │                         #   чтобы сборщик мог выполнить таск, 
│   │   │                         #   его необходимо прописать в ../paths/tasks.js
│   │   ├── clean.js              # Удадение папки со сборкой (build)
│   │   ├── copy.fonts.js         # Копирование шрифтов
│   │   ├── copy.image.js         # Копирование изображений
│   │   ├── copy.video.js         # Копирование видео-файлов
│   │   ├── css.foundation.js     # Конкатенация и подключение сторонних стилей
│   │   ├── js.foundation.js      # Конкатенация и подключение сторонних скриптов
│   │   ├── js.lint.js            # Запуск eslint
│   │   ├── js.process.js         # Сборка пользовательских скриптов
│   │   ├── pug.js                # Сборка страниц из Pug шаблонов
│   │   ├── sass.js               # Сборка пользовательских стилей
│   │   ├── serve.js              # Запуск локального сервера
│   │   ├── sprite.png.js         # Сборка спрайтов из .png и .gif
│   │   ├── sprite.svg.js         # Сборка спрайтов из .svg
│   │   └── watch.js              # Отслеживание изменений и запуск задач
│   └── config.js                 # Файл конфигурации для путей сборщика
│                                 #   в частности, здесь указывается корневой каталог
│                                 #   для результатов сборки (build)
│      
├── build/                        # Сборка (автогенерация)
│   ├── css/                      # Стили
│   ├── js/                       # Скрипты
│   ├── fonts/                    # Шрифты
│   ├── img/                      # Все изображения
│   └── index.html                # Страница
│   
├── .eslintrc                     # Конфигурация проверки JavaScript в ESLint
├── .gitignore                    # Список исключённых файлов из Git
├── gulpfile.js                   # Файл для запуска Gulp.js
├── package.json                  # Список модулей и прочей информации
├── content.json                  # Данные для сайта
└── readme.md                     # Документация шаблона