Стартовый проект для верстки

Шаблон устроен таким образом, что бы его можно было безболезненно положить в папку CMS, запустить gulp и работать. Потому пришлось отказаться от финальной сборки(build), т. к. при интеграции пришлось бы каждый раз перезаливать файлы. К сожалению это лишает возможности пользоваться такими вещами как template для html и прочего.

Состав

• gulp и его плагины
• Webpack
• Bower
• jQuery
• Bootstrap-sass
• Velocity
• Owl-Carousel

Установка

npm install

bower install

Установятся все необходимые зависимости.

Gulp

gulp serve

Произведет сборку и запустит локальный сервер с livereload.

gulp build

Произведет сборку без запуска сервера.

Плагины

• gulp-plumber – обработка ошибок
• gulp-sass – компиляция scss
• gulp-concat – конкатинация css
• gulp-csso – минификация css
• gulp-autoprefixer – автопрефиксер
• gulp-imagemin – сжатие изображений
• gulp-cache – кеш для ускорения работы тасков
• browser-sync – livereload во время разработки
• webpack – модульность js
• babel – es2015
• uglify-loader – плагин webpack для минификации js

Bower

jQuery, Bootstrap и прочие зависимости подключаются с помощью bower, например:

bower install jQuery --save-dev

CSS файлы прописываем в gulpfile.js, SCSS @import в src/styles/bundle.scss, JS в src/js/bundle.js с помощью webpack по принципу CommonJs.

JS

• Babel дает возможность писать на современно ECMAScrit 2015
• JS можно и нужно разбивать на модули
• Все js файлы(модули) проекта собираются в src/js/bundle.js
• Модульность обеспечивает webpack, он же занимается минификацией
• Что бы не подключать во всех файлах(модулях) jquery, он подключен глобально с помощью конструкции script!

SASS

• Есть основной файл src/styles/bundle.scss. В него с помощью @import прописываются остальные файлы стилей
• В папку blocks складываются файлы стилей повторяющихся элементов сайта(header, footer)
• В папку pages складываются файлы стилей страниц

Bootstrap

Используется bootstrap-sass.

SASS

Компоненты bootstrap подключаются в файле src/styles/_bootstrap.scss. Не нужные компоненты можно закомментировать, что бы не тащить лишнее в проект.

JS

JS компоненты bootstrap подключаются в src/js/bundle.js с помощью webpack по принципу CommonJs Не нужные компоненты можно закомментировать.

TODO

• Собрать в шаблон часто используемые штуки