Шаблон устроен таким образом, что бы его можно было безболезненно положить в папку CMS, запустить gulp и работать. Потому пришлось отказаться от финальной сборки(build), т. к. при интеграции пришлось бы каждый раз перезаливать файлы. К сожалению это лишает возможности пользоваться такими вещами как template для html и прочего.
- gulp и его плагины
- Webpack
- Bower
- jQuery
- Bootstrap-sass
- Velocity
- Owl-Carousel
npm install
bower install
Установятся все необходимые зависимости.
gulp serve
Произведет сборку и запустит локальный сервер с livereload.
gulp build
Произведет сборку без запуска сервера.
gulp-plumber
– обработка ошибокgulp-sass
– компиляция scssgulp-concat
– конкатинация cssgulp-csso
– минификация cssgulp-autoprefixer
– автопрефиксерgulp-imagemin
– сжатие изображенийgulp-cache
– кеш для ускорения работы тасковbrowser-sync
– livereload во время разработкиwebpack
– модульность jsbabel
– es2015uglify-loader
– плагин webpack для минификации js
jQuery, Bootstrap и прочие зависимости подключаются с помощью bower, например:
bower install jQuery --save-dev
CSS файлы прописываем в gulpfile.js
, SCSS @import
в src/styles/bundle.scss
, JS в src/js/bundle.js
с помощью webpack по принципу CommonJs.
- Babel дает возможность писать на современно ECMAScrit 2015
- JS можно и нужно разбивать на модули
- Все js файлы(модули) проекта собираются в
src/js/bundle.js
- Модульность обеспечивает webpack, он же занимается минификацией
- Что бы не подключать во всех файлах(модулях)
jquery
, он подключен глобально с помощью конструкцииscript!
- Есть основной файл
src/styles/bundle.scss
. В него с помощью@import
прописываются остальные файлы стилей - В папку
blocks
складываются файлы стилей повторяющихся элементов сайта(header, footer) - В папку
pages
складываются файлы стилей страниц
Используется bootstrap-sass.
Компоненты bootstrap подключаются в файле src/styles/_bootstrap.scss
.
Не нужные компоненты можно закомментировать, что бы не тащить лишнее в проект.
JS компоненты bootstrap подключаются в src/js/bundle.js
с помощью webpack по принципу CommonJs
Не нужные компоненты можно закомментировать.
- Собрать в шаблон часто используемые штуки