Стартовый комплект для разработки с 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. Начальная разметка выполнена по измененной системе именования классов.
-
Запустить терминал (для пользователей Windows рекомендуется Cmder) и клонировать репозиторий (рекомендуется):
$ git clone https://github.com/edalis/sk-basic.git
или скачать архив репозитория и распаковать его в удобное место на компьютере
-
Переименовать (необязательно) полученную папку sk-base по имени проекта, например в project.dev
-
Перейти в папку проекта и выполнить в терминале команды:
- Установить необходимые для работы сборки модули:
$ yarn // через Yarn (рекомендуется)
$ npm i // через Npm (если не устанавливали Yarn или возникли какие то проблемы при установке через него)
- Установить через Bower, включенные в сборку библиотеки:
$ bower i
- Запустить процесс разработки и начать создавать шедевр :) :
$ gulp
В процессе...