Мой босяцкий стартовый template с Gulp

ВНИМАНИЕ! Этот проект всегда в разработке, я добавляю и меняю в нем порой довольно много всего => может выглядеть странно и не менее странно работать.

Установка:

• git clone [email protected]:yasell/start-template.git
• npm install

Юзкейсы

Старт:

• npm start
• вжухх и браузер запущен + отслеживаются изменения в файлах app/ директории...

Итоговая сборка проекта:

• npm run build (сгенерит папочку build в корне)

Сделать svg-спрайт:

• npm run sprite
• все svg иконки из app/img/icons соберутся в спрайтик sprite.svg в папкe sprite
• в sass/helpers/ появится файлик со стилями для иконок _sprite.scss
• вставляем нужную иконку как

<svg class="icon  icon-cross">
  <use xlink:href="img/icons/sprite/sprite.svg#cross"></use>
</svg>

• Мы подключаем иконку ссылаясь на внешний svg-файл, к сожалению не все браузеры поддерживают такой запрос. Для решения этой проблемы есть библиотека svg4everybody. Подключаем её и инициализируем:

$(document).ready(function () {
	svg4everybody({});
});

Валидация html:

• npm run validation

Линтинг стилей:

• npm run csslint

Парадигма

• Нэйминг классов по БЭМ (block__element--modificator).
• Директория разработки app/ Все файлики по папкам: js, fonts, img, sass (переменные, глобальная стилизация, стили блоков).
• Диспетчер подключений стилей - app/sass/style.scss. Все указанные там файлы, компайлятся в один итоговый style.css.
• HTML можно собирать из кусков (базовые хедер/футер уже лежат в app/html/layout и подключены к стартовой страничке).
• Для стилей: CSS линтер здесь - stylelint (использую в Атоме, конфиг есть); минификатор/оптимизатор - csso.
• Проверить актуальность и обновить package.json и все зависимости можно введя в консоль: ncu -u.

В сборку включены следующие модули

• browser-sync – плагин для запуска локального веб-сервера.
• gulp-sass – компиляция sass в css.
• gulp-postcss – postcss собственной персоной.
• autoprefixer – авто-префиксование стилей.
• css-mqpacker – аккуратная сортировка всех медиа выражений.
• gulp-rigger – реиспользование кусков html/js кода в любом месте проекта.
• gulp-typograf – гибкий типограф.
• gulp-minify – минификация js файлов c UglifyJS2.
• gulp-csso – минификации и оптимизации css кода. (по умолчанию в сборке минификация отключена (*!читаемость*))
• csscomb – "расчесывание" стилей.
• gulp-imagemin - оптимизация и сжатие картинок без потери качества.
• gulp-svgmin – svg "чистка"
• gulp-svg-sprite – генерация и настройка svg спрайта
• gulp-html5-lint – линтинг (валидация) html

Назначение папок

build/  			  Сюда соберется итоговый проект (после `npm run build`)
app/        		Исходные файлы (здесь работает сервер автообновлений)
app/fonts/  		Шрифты проекта (никак не обрабатываются, при сборке просто переносятся в 'build/fonts')
app/img/    		Глобальные картинки (обрабатываются из корня этой папки плюс подпапки)
app/js/     		Глобальные js-файлы (обработается только если существует и не пустой), фреймворки (только копируются, могут быть подключены вручную)
app/sass/				Стилевые файлы: глобальные стили и стили блоков - все подключается здесь в 'style.scss'!
app/pages/			Здесь заготовки страниц и блоки (куски), из которых собираются страницы
app/index.html	Главная страница проекта (собирается из 'app/html/index.html' соответственно)