yasell/start-template

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

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

Установка:

git clone git@github.com: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' соответственно)