Владимир Кузнецов — Прототип сайта: разработка и...
DESCRIPTION
Фронтенд-разработчики уверенно движутся в сторону систем сборки проектов. Даже если это вёрстка всего лишь нескольких страниц, то генерация HTML из фрагментов и раскладок избавит от рутинного копирования кода. А лёгкий и непринуждённый деплой проекта на сервер позволит регулярно показывать заказчику готовые части и быстрее получать обратную связь.TRANSCRIPT
![Page 1: Владимир Кузнецов — Прототип сайта: разработка и развёртывание](https://reader033.vdocuments.us/reader033/viewer/2022052412/557ec82ed8b42ae27f8b47ed/html5/thumbnails/1.jpg)
Web Standards Days
Прототип сайта:разработка и развёртывание
Владимир Кузнецов, Engine6
![Page 2: Владимир Кузнецов — Прототип сайта: разработка и развёртывание](https://reader033.vdocuments.us/reader033/viewer/2022052412/557ec82ed8b42ae27f8b47ed/html5/thumbnails/2.jpg)
Прототип сайта:разработка и
развёртывание
![Page 3: Владимир Кузнецов — Прототип сайта: разработка и развёртывание](https://reader033.vdocuments.us/reader033/viewer/2022052412/557ec82ed8b42ae27f8b47ed/html5/thumbnails/3.jpg)
Одно из правил в нашей компанииПоказывать заказчику части проекта по мере готовности.
Задачи— командная работа над прототипом;
— простая процедура развёртывания.
3
![Page 4: Владимир Кузнецов — Прототип сайта: разработка и развёртывание](https://reader033.vdocuments.us/reader033/viewer/2022052412/557ec82ed8b42ae27f8b47ed/html5/thumbnails/4.jpg)
Сборка проектаХоть нам и нужно в конечном итоге получить статические HTML-, CSS-
и JS-файлы, но «собирать» их можно из совершенно других форматов.
4
![Page 5: Владимир Кузнецов — Прототип сайта: разработка и развёртывание](https://reader033.vdocuments.us/reader033/viewer/2022052412/557ec82ed8b42ae27f8b47ed/html5/thumbnails/5.jpg)
Сборка JavaScriptОтдельные компоненты «склеиваются» в один файл, который потом
обрабатывается минификатором.
5
![Page 6: Владимир Кузнецов — Прототип сайта: разработка и развёртывание](https://reader033.vdocuments.us/reader033/viewer/2022052412/557ec82ed8b42ae27f8b47ed/html5/thumbnails/6.jpg)
Сборка CSSФайлы стилей генерируются с помощью препроцессоров
LESS, Stylus и т.п.
6
![Page 7: Владимир Кузнецов — Прототип сайта: разработка и развёртывание](https://reader033.vdocuments.us/reader033/viewer/2022052412/557ec82ed8b42ae27f8b47ed/html5/thumbnails/7.jpg)
Сборка HTMLФайлы с разметкой генерируются шаблонизатором из отдельных
страниц, повторно используемых фрагментов и раскладок.
7
![Page 8: Владимир Кузнецов — Прототип сайта: разработка и развёртывание](https://reader033.vdocuments.us/reader033/viewer/2022052412/557ec82ed8b42ae27f8b47ed/html5/thumbnails/8.jpg)
Наши первыешаги
![Page 9: Владимир Кузнецов — Прототип сайта: разработка и развёртывание](https://reader033.vdocuments.us/reader033/viewer/2022052412/557ec82ed8b42ae27f8b47ed/html5/thumbnails/9.jpg)
AssembleГенератор статических сайтов на Node.js
http://assemble.io
Есть шаблон для Grunt и генератор для Yeoman.
9
![Page 10: Владимир Кузнецов — Прототип сайта: разработка и развёртывание](https://reader033.vdocuments.us/reader033/viewer/2022052412/557ec82ed8b42ae27f8b47ed/html5/thumbnails/10.jpg)
Assemble— запускается как Grunt-задача;
— использует шаблоны Handlebars (или любые другие);
— содержит набор готовых хелперов (легко написать свой);
— поддерживает раскладки любой вложенности;
— позволяет повторно использовать фрагменты страниц и выносить
данные из разметки.
10
![Page 11: Владимир Кузнецов — Прототип сайта: разработка и развёртывание](https://reader033.vdocuments.us/reader033/viewer/2022052412/557ec82ed8b42ae27f8b47ed/html5/thumbnails/11.jpg)
![Page 12: Владимир Кузнецов — Прототип сайта: разработка и развёртывание](https://reader033.vdocuments.us/reader033/viewer/2022052412/557ec82ed8b42ae27f8b47ed/html5/thumbnails/12.jpg)
![Page 13: Владимир Кузнецов — Прототип сайта: разработка и развёртывание](https://reader033.vdocuments.us/reader033/viewer/2022052412/557ec82ed8b42ae27f8b47ed/html5/thumbnails/13.jpg)
Мета-данные страницыYAML front matter
— layout
— published
— category , categories и tags
13
![Page 14: Владимир Кузнецов — Прототип сайта: разработка и развёртывание](https://reader033.vdocuments.us/reader033/viewer/2022052412/557ec82ed8b42ae27f8b47ed/html5/thumbnails/14.jpg)
![Page 15: Владимир Кузнецов — Прототип сайта: разработка и развёртывание](https://reader033.vdocuments.us/reader033/viewer/2022052412/557ec82ed8b42ae27f8b47ed/html5/thumbnails/15.jpg)
![Page 16: Владимир Кузнецов — Прототип сайта: разработка и развёртывание](https://reader033.vdocuments.us/reader033/viewer/2022052412/557ec82ed8b42ae27f8b47ed/html5/thumbnails/16.jpg)
Мета-данные страницыШаблон страницы получает данные из:
— YAML front matter
— Gruntmle.js
— внешних JSON- или YAML-файлов
16
![Page 17: Владимир Кузнецов — Прототип сайта: разработка и развёртывание](https://reader033.vdocuments.us/reader033/viewer/2022052412/557ec82ed8b42ae27f8b47ed/html5/thumbnails/17.jpg)
![Page 18: Владимир Кузнецов — Прототип сайта: разработка и развёртывание](https://reader033.vdocuments.us/reader033/viewer/2022052412/557ec82ed8b42ae27f8b47ed/html5/thumbnails/18.jpg)
![Page 19: Владимир Кузнецов — Прототип сайта: разработка и развёртывание](https://reader033.vdocuments.us/reader033/viewer/2022052412/557ec82ed8b42ae27f8b47ed/html5/thumbnails/19.jpg)
![Page 20: Владимир Кузнецов — Прототип сайта: разработка и развёртывание](https://reader033.vdocuments.us/reader033/viewer/2022052412/557ec82ed8b42ae27f8b47ed/html5/thumbnails/20.jpg)
![Page 21: Владимир Кузнецов — Прототип сайта: разработка и развёртывание](https://reader033.vdocuments.us/reader033/viewer/2022052412/557ec82ed8b42ae27f8b47ed/html5/thumbnails/21.jpg)
![Page 22: Владимир Кузнецов — Прототип сайта: разработка и развёртывание](https://reader033.vdocuments.us/reader033/viewer/2022052412/557ec82ed8b42ae27f8b47ed/html5/thumbnails/22.jpg)
Встроенные переменные— basename или pagename
— filename
— dirname
— ext
22
![Page 23: Владимир Кузнецов — Прототип сайта: разработка и развёртывание](https://reader033.vdocuments.us/reader033/viewer/2022052412/557ec82ed8b42ae27f8b47ed/html5/thumbnails/23.jpg)
HelpersБлочные: {{#each}} , {{#if}} и т.п.
{{#is basename "index"}}
<span>Site name</span>
{{else}}
<a href="/">Site name</a>
{{/is}}
01.
02.
03.
04.
05.
23
![Page 24: Владимир Кузнецов — Прототип сайта: разработка и развёртывание](https://reader033.vdocuments.us/reader033/viewer/2022052412/557ec82ed8b42ae27f8b47ed/html5/thumbnails/24.jpg)
HelpersФункции: {{default}} , {{formatDate}} и т.п.
<title> {{default title basename}} </title>
<script src="/all.js?v= {{now "%d%H%M%S"}} "></script>
01.
02.
24
![Page 25: Владимир Кузнецов — Прототип сайта: разработка и развёртывание](https://reader033.vdocuments.us/reader033/viewer/2022052412/557ec82ed8b42ae27f8b47ed/html5/thumbnails/25.jpg)
Helpersmodule.exports.register =
function (Handlebars, options) {
Handlebars.registerHelper("foo", function (str) {
return "---=== " + str + " ===---";
});
};
01.
02.
03.
04.
05.
06.
25
![Page 26: Владимир Кузнецов — Прототип сайта: разработка и развёртывание](https://reader033.vdocuments.us/reader033/viewer/2022052412/557ec82ed8b42ae27f8b47ed/html5/thumbnails/26.jpg)
PartialsВынесем в отдельные файлы повторяющиеся фрагменты кода.
26
![Page 27: Владимир Кузнецов — Прототип сайта: разработка и развёртывание](https://reader033.vdocuments.us/reader033/viewer/2022052412/557ec82ed8b42ae27f8b47ed/html5/thumbnails/27.jpg)
Partials{{> sidebar}}
вызов в контексте страницы
{{> sidebar context1}}
вызов в контексте объекта context1
{{#context2}} {{> sidebar}} {{/context2}}
вызов в контексте объекта context2
27
![Page 28: Владимир Кузнецов — Прототип сайта: разработка и развёртывание](https://reader033.vdocuments.us/reader033/viewer/2022052412/557ec82ed8b42ae27f8b47ed/html5/thumbnails/28.jpg)
Запуск задач с помощью Grunt$ grunt
одноразовый запуск сборки всего проекта
$ grunt watch
запуск сборки и отслеживание изменения в файлах
$ grunt server
запуск HTTP-сервера и отслеживание изменений с livereload
28
![Page 29: Владимир Кузнецов — Прототип сайта: разработка и развёртывание](https://reader033.vdocuments.us/reader033/viewer/2022052412/557ec82ed8b42ae27f8b47ed/html5/thumbnails/29.jpg)
Пример GruntCle.jshttps://github.com/doneright/assemble
— сборка HTML из шаблонов;
— компиляция LESS-файлов;
— склеивание и минификация скриптов;
— watcher, сервер и livereload.
29
![Page 30: Владимир Кузнецов — Прототип сайта: разработка и развёртывание](https://reader033.vdocuments.us/reader033/viewer/2022052412/557ec82ed8b42ae27f8b47ed/html5/thumbnails/30.jpg)
Git
![Page 31: Владимир Кузнецов — Прототип сайта: разработка и развёртывание](https://reader033.vdocuments.us/reader033/viewer/2022052412/557ec82ed8b42ae27f8b47ed/html5/thumbnails/31.jpg)
Git— Сторонние сервисы (GitHub, CodeBase и др.)
— Свой Git-сервер (Gitosis)
31
![Page 32: Владимир Кузнецов — Прототип сайта: разработка и развёртывание](https://reader033.vdocuments.us/reader033/viewer/2022052412/557ec82ed8b42ae27f8b47ed/html5/thumbnails/32.jpg)
Git работаетбез сервера!
![Page 33: Владимир Кузнецов — Прототип сайта: разработка и развёртывание](https://reader033.vdocuments.us/reader033/viewer/2022052412/557ec82ed8b42ae27f8b47ed/html5/thumbnails/33.jpg)
Автоматическое развёртываниеЕсли GitHub и VPS, то настраиваем «WebHook»
33
![Page 34: Владимир Кузнецов — Прототип сайта: разработка и развёртывание](https://reader033.vdocuments.us/reader033/viewer/2022052412/557ec82ed8b42ae27f8b47ed/html5/thumbnails/34.jpg)
![Page 35: Владимир Кузнецов — Прототип сайта: разработка и развёртывание](https://reader033.vdocuments.us/reader033/viewer/2022052412/557ec82ed8b42ae27f8b47ed/html5/thumbnails/35.jpg)
![Page 36: Владимир Кузнецов — Прототип сайта: разработка и развёртывание](https://reader033.vdocuments.us/reader033/viewer/2022052412/557ec82ed8b42ae27f8b47ed/html5/thumbnails/36.jpg)
Автоматическое развёртываниеЕсли собственный сервер,
то настраиваем post-receive или update хук.
36
![Page 37: Владимир Кузнецов — Прототип сайта: разработка и развёртывание](https://reader033.vdocuments.us/reader033/viewer/2022052412/557ec82ed8b42ae27f8b47ed/html5/thumbnails/37.jpg)
Автоматическое развёртываниеЕсли к хостингу есть доступ только по FTP,
то выручит скрипт git-ftp.
Файлы добавляются, удаляются и обновляются при условии,
что они находятся под контролем версий.
37
![Page 38: Владимир Кузнецов — Прототип сайта: разработка и развёртывание](https://reader033.vdocuments.us/reader033/viewer/2022052412/557ec82ed8b42ae27f8b47ed/html5/thumbnails/38.jpg)
Демо
![Page 39: Владимир Кузнецов — Прототип сайта: разработка и развёртывание](https://reader033.vdocuments.us/reader033/viewer/2022052412/557ec82ed8b42ae27f8b47ed/html5/thumbnails/39.jpg)
![Page 40: Владимир Кузнецов — Прототип сайта: разработка и развёртывание](https://reader033.vdocuments.us/reader033/viewer/2022052412/557ec82ed8b42ae27f8b47ed/html5/thumbnails/40.jpg)
![Page 41: Владимир Кузнецов — Прототип сайта: разработка и развёртывание](https://reader033.vdocuments.us/reader033/viewer/2022052412/557ec82ed8b42ae27f8b47ed/html5/thumbnails/41.jpg)
![Page 42: Владимир Кузнецов — Прототип сайта: разработка и развёртывание](https://reader033.vdocuments.us/reader033/viewer/2022052412/557ec82ed8b42ae27f8b47ed/html5/thumbnails/42.jpg)
![Page 43: Владимир Кузнецов — Прототип сайта: разработка и развёртывание](https://reader033.vdocuments.us/reader033/viewer/2022052412/557ec82ed8b42ae27f8b47ed/html5/thumbnails/43.jpg)
Заключение— Узнали как собрать статический сайт из страниц, повторно
используемых фрагментов и раскладок.
— Узнали как быстро и просто выложить собранный сайт на сервер.
Слайды презентации: bit.ly/wsd-2013-ci
43
![Page 44: Владимир Кузнецов — Прототип сайта: разработка и развёртывание](https://reader033.vdocuments.us/reader033/viewer/2022052412/557ec82ed8b42ae27f8b47ed/html5/thumbnails/44.jpg)
Спасибо за вниманиеВладимир Кузнецов
Twitter: @mista_k
Блог: noteskeeper.ru
Слайды презентации: bit.ly/wsd-2013-ci
44