Starter Kit Basic

Стартовый комплект для разработки с Gulp 4. Базовый шаблон.

Требования для работы шаблона:

• Сервер Node.js (включает в себя, также необходимый, менеджер пакетов npm)
• Git
• Gulp 4. Если Gulp еще никогда не устанавливался или уже установлен Gulp 3, то смотрим, как установить Gulp 4. Так же рекомендуется посмотреть весь скринкаст по Gulp 4
• Менеджер библиотек Bower:

  $ npm i -g bower // Устанавливаем Bower
  

• Рекомендуется установить менеджер пакетов Yarn, для более быстрой и безопасной установки необходимых модулей.

Библиотеки, модули и основные возможности:

Библиотеки, устанавливаемые через менеджер Bower (файл bower.json в корне шаблона):

• Normalize.css - кроссбраузерность в стилях по умолчанию (о normalize.css)
• JQuery - помогает легко получать доступ к любым элементам страницы и манипулировать ими

Модули и возможности, добавляемые через менеджер пакетов (файл package.json в корне шаблона):

• LostGrid - мощная, гибкая и семантическая PostCSS сетка. Позволяет использовать как выравнивание float, так и flexbox
• Rucksack - PostCSS библиотека миксинов для ускорения работы
• BrowserSync - отслеживание изменений в файлах и автоматическая перезагрузка браузера при сохранении редактируемых файлов
• Autoprefixer - автоматическое добавление необходимых префиксов, при компиляции стилей
• Использование препроцессора SASS и его мощных возможностей. По умолчанию используется формат файлов стилей .scss, но легко можно использовать .sass
• Вывод сообщений об ошибках при компиляции стилей и продолжение работы после исправления, без перезапуска задачи
• Автоматическая сортировка CSS свойств
• Легкая работа с изображениями в файлах стилей (подключение, получение размеров, встраивание в кодировке Base64)
• Автоматическая генерация фавиконок для различных устройств и их подключение к странице
• Автоматическая минификация изображений
• Кэширование минифицированных изображений для ускорения разработки и возможность очистки кэша
• Автоматическая минификация и конкатенация файлов CSS, JS и подключение их к странице, при сборке проекта
• Автоматическая сборка готового проекта

А так же:

• В шаблоне используется "ленивая загрузка" (Lazy Load) модулей (для каждой задачи подключаются только необходимые для ее выполнения модули), это ускоряет запуск задач
• Все задачи вынесены в отдельную папку ./tasks, что позволяет быстро их находить и редактировать
• Хорошо комментированные файлы
• Готовая страница ошибки 404, с возможностью легкого изменения ее стилей
• Коллекция миксинов, с возможностью добавления собственных наработок
• Отдельный файл переменных SCSS, позволяющий быстро изменить ширину, цветовую схему и шрифты сайта.
• Шаблон предполагает использование методологии BEM. Начальная разметка выполнена по измененной системе именования классов.

Быстрый старт:

1. Запустить терминал (для пользователей Windows рекомендуется Cmder) и клонировать репозиторий (рекомендуется):

   $ git clone https://github.com/edalis/sk-basic.git
   

   или скачать архив репозитория и распаковать его в удобное место на компьютере

2. Переименовать (необязательно) полученную папку sk-base по имени проекта, например в project.dev

3. Перейти в папку проекта и выполнить в терминале команды:

   • Установить необходимые для работы сборки модули:

   $ yarn   // через Yarn (рекомендуется)
   

   $ npm i   // через Npm (если не устанавливали Yarn или возникли какие то проблемы при установке через него)
   

   • Установить через Bower, включенные в сборку библиотеки:

   $ bower i
   

   • Запустить процесс разработки и начать создавать шедевр :) :

   $ gulp
   

Подробное описание работы:

В процессе...