twopix/csssr-project-template

Шаблон проекта для быстрого старта.

CSSSR Project Template

Шаблон проекта для быстрого старта.

Инструменты

• bump - обновление версии проекта.
• clean - очистка папки от файлов.
• spritesmith - генератор спрайтов и CSS переменных.
• imagemin - сжатие картинок.
• stylus - препроцессор CSS.
• autoprefixer - подстановка префиксов для заданных браузеров.
• combine-media-queries - комбинирование медиа-запросов в CSS.
• csscomb - форматирование CSS.
• jade - препроцессор HTML.
• prettify - форматирование HTML.
• jshint - проверка JavaScript на качество кода с подсказками.
• copy - создание копий файлов.
• browserSync - сервер проекта и автоперезагрузка с оповещениями.
• watch - отслеживание изменений файлов и их компиляция.

Подготовка к работе

1. Устанавливаем Node.js, включающий в себя NPM (Node Packet Manager).
2. npm i -g grunt-cli - устанавливаем Grunt.
3. Ознакомьтесь со статьей по установке git под Вашу операционную систему.

Эти 3 шага выполняются один раз.
Если при вызове команды grunt будет писать ошибку, что эта команда не найдена, то нужно перезагрузиться или выйти из системы и зайти снова.

Приступаем к работе

1. git clone https://github.com/CSSSR/csssr-project-template.git new-project - cкачать в папку new-project.
2. npm i - устанавливаем пакеты.
3. grunt - запускаем Grunt и работаем.

Доступные команды

Сборка

Команда	Назначение
grunt build	Очищается папка dist/, компилируются и копируются файлы в dist/ только один раз.
grunt	Тоже самое плюс отслеживаются изменения файлов.

Чтобы выключить, нужно нажать ctrl + c или закрыть консоль.

Обновление версии

Команда	Назначение
grunt bump / grunt bump:patch	Патч версия: 0.0.x.
grunt bump:minor	Минорная версия: 0.x.0.
grunt bump:major	Мажорная версия: x.0.0.

Структура папок

Папка	Назначение
app	Исходники.
dist	Сборка сайта для заказчика. Открывается по адресу: http://127.0.0.1:3000.

Полезные ссылки

• grunt
• jade
• stylus
• Grunt для тех, кто считает штуки вроде него странными и сложными
• Сборка сайтов на независимых блоках из Jade и Stylus с использованием Grunt.js
• Grunt: система сборки для фронтенд-разработчиков