Front-end automated boilerplate
How to use
- Install deps
npm i - Run
npm run prepare - all tasks should be started via npm. e.g.
npm run gulp,npm run gulp dev.
It looks a bit ugly, but this is the only way to work with 4 ver of gulp until it'll be finally released.
So, what do we have under the hood for now?
- pug -> html
- sass -> postcss -> css
- browsersync
- autoprefixer
- es2015 compilation
- watch 'n compile
- generator for styles and templates
Boilerplate for UI development
Навигация
- [What is this?](#What is this)
- Installation
- Что в мешке?
- Как все работает?
- TODO
What is this?
This is a boilerplate for reducing amount of routine tasks in UI development.
The boilerplate is built based on my experience and needs, so I don't guarantee it will be useful for you as is. You can use it as an example and modify it or build your own.
Intallation
- Download and install node.js
- Clone this repository and remove
.gitin order to connect your own git repository later - Install all dependencies
npm i - Run
npm run prepare
Что в мешке?
Автоматизированные задачи
- Компиляция es2015
- Компиляция Jade-шаблонов
- PostCSS с синтаксисом sugarss
- Добавление вендорных префиксов к свойствам
- Минификация css и js
- Оптимизация картинок
- авто-обновление браузера
- подготовка стилей
rtl - загрузка зависимостей js через npm
- загрузка файлов на сервер по ssh
- Валидация html на w3c
- архивирование файлов
distиsrcпапок - слежение за изменениями файлов
- генерация файлов стилей и шаблонов
- stylelint
PostCSS plugins
- sugarss
- postcss-scss
- postcss-import
- precss
- postcss-inline-svg
- postcss-assets
- postcss-svgo
- postcss-hexrgba
- postcss-sass-color-functions
- postcss-short
- autoprefixer
Файловая структура
gulpfile.js— папка в которой лежитgulpfileи таски.src— исходные файлы проектаdist— результат билда
Содержимое папки src
assetsstyles— стили проектаcommoncomponentshelpers
images— картинки проекта, включаяcontentпапку для картинок в контентеscripts— скрипты
templatespages— шаблоны страницcomponents— блоки из которых будут собираться страницы.partialslayout
Как все работает?
В gulpfile.js/index.js описаны таски, которые выполняют те или иные действия. Таски можно вызывать по отдельности и группами. Вызов группами — самый частый юзкейс.
Все gulp-плагины загружаются автоматически из package.json с помощью плагина gulp-load-plugins. Это позволяет уменьшить объем gulpfile.
Gulp в процессе работы берет файл из 1 папки, выполняет с ним необходимые операции и сохраняет в другой папке. Для удобства, все пути к файлам я вынес в переменные и храню их в файле config.json.
Генератор файлов
В процессе работы много времени уходит на создание файлов для компонентов и страниц. Я решил это дело автоматизировать.
Теперь одной командой npm run add можно создать:
- стиль для компонента
- миксин
- шаблон для компонента
- и страницу
При создании стиля для компонента, можно создать файл для респонсив версии, и все это автоматически подключится в main.sass
При создании новой страницы, она добавится в список всех страниц в файле index.pug
Задачи
Все задачи запускаются посредством npm scripts.
NPM
npm start— запускgulp dev. Чтобы запустить browsersync на другом порту, можно писатьPORT=8080 npm startnpm run production— запускgulp productionnpm run deploy— запускgulp deploynpm run validate— запускgulp validatenpm run minify— запускgulp minifynpm run add— запуск генератора файлов
Gulp
Отдельные
styles— компиляция sassstyles:min— минификацияcssostyles:rtl— вариант стилей справа-налевоscripts— компиляция es2015scripts:min— минификация jsimages— перенос картинок изsrcвdistimages:min— оптимизация картинок вdisttemplates— компиляция jade-шаблоновsprites— сборка спрайтовwatch— слежение за изменениями файловbrowsersync— автообновление в браузереarchive— архивацияdistиsrcпапокarchive:dist— архивацияdistarchive:src— архивацияsrcssh— запуск задачssh:clean,ssh:upload,ssh:unzipssh:clean— заходит на сервер, чистит папку проектаssh:upload— загружает на сервер архивdistпапкиssh:unzip— распаковывае на сервереdistархив и удаляет егоw3c:html— валидация html кода
Группы
default—bower,images,styles,scripts,templates,spritesdev—default,browsersync,watchminify—images:min,styles:min,scripts:minproduction—default,styles:rtl,minifydeploy—production,archive,sshvalidate—w3c:html