Weitere ähnliche Inhalte Ähnlich wie TARS: Сделай уровень frontend-рутины 0% — Артём Малко, 2ГИС Ähnlich wie TARS: Сделай уровень frontend-рутины 0% — Артём Малко, 2ГИС (20) 2. Над чем работаю
• Инфопортал info.2gis.ru
• Techno techno.2gis.ru
• Лендинги и promo
2
16. Основные фичи
• Gulp
• Выбор шаблонизатора (Jade, Handlebars, html*)
• Выбор css-препроцессора (SCSS, LESS, Stylus, css*)
• Данные отдельно от шаблона
• Модульный, легко расширяемый
16
17. Основные фичи
• Работа с графикой на раз, два, три
• Конфиг на все случаи жизни
• Хорошая документация
• Создание архива готовой сборки
• и многое другое...
17
19. Основные команды
• gulp init
• gulp или gulp build (--min, --release, --ie8)
• gulp dev (--lr, --tunnel, --ie8)
19
21. ├── gulpfile.js # gulpfile сборщика
├── tars-config.js # Конфигурационный файл
├── package.json # Зависимости TARS
├── user-package.json # Пользовательские пакеты
└── tars/ # Таски и хелперы для gulp
└── helpers/ # Хелперы
└── tasks/ # Основные таски
└── user-tasks/ # Пользовательские таски
└── watchers/ # Основные вотчеры
└── user-watchers/ # Пользовательские вотчеры
└── markup/ # Основная папка с проектом
└── modules/ # Модули
└── pages/ # Шаблоны страниц
└── static/ # Различная статика (css, js и т.п.)
└── docs/ # Документация
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
21
23. Структура модуля
exampleModule/ # Пример модуля
└── assets/ # Различная статика для текущего модуля
└── ie/ # Cтили для ie8 и ie9 (ie9/ie8.scss|less|styl)
└── data/ # Папка для хранения данных для модуля
├── data.js # Данные для модуля в виде js-объекта
├── exampleModule.html # Html|Jade-представления модуля
├── exampleModule.scss|less|styl # Scss|Less|Stylus-представление модуля
├── exampleModule.js # Js-представление модуля
01.
02.
03.
04.
05.
06.
07.
08.
23
26. Html-представление
<nav class="menu {{#if mod}}_{{mod}}{{/if}}">
<ul class="menu__list">
{{#each list}}
<li class="menu__listItem">
<a href="{{url}}" class="menu__listItemLink">
{{{title}}}
</a>
<li>
{{/each}}
</ul>
</nav>
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
26
27. Data-представление
menu: {
top: {
mod: 'top',
list: [
{
url: 'http://2gis.ru',
title: '2gis'
}, {...}
]
},
side: {...},
bottom: {...},
}
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
27
28. Используем готовый модуль
<html>
<header>
{{> menu/menu menu.top}}
</header>
<aside>
{{> menu/menu menu.side}}
</aside>
<footer>
{{> menu/menu menu.footer}}
</footer>
</html>
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
28
30. Структура папки для статики
static/
└── fonts/# Шрифты
└── img/# Картинки
└── js/# Js
└── misc/# Различные дополнительные файлы
└── scss/# А тут стили
01.
02.
03.
04.
05.
06.
30
31. Структура папки для статики
static/
└── fonts/# Шрифты
└── img/# Картинки
└── js/# Js
└── misc/# Различные дополнительные файлы
└── scss/# А тут стили
01.
02.
03.
04.
05.
06.
31
33. Собираем CSS
• Генерация стилей спрайтов
• Конкатинация
• Компилирование в CSS
• Autoprefixer
• Сжатие
• Добавление суффиксов min и hash
33
34. Собираем CSS
• Генерация стилей спрайтов
• Конкатинация
• Компилирование в CSS
• Autoprefixer
• Сжатие
• Добавление суффиксов min и hash
34
35. Порядок сборки CSS
modules/
└── */moduleName.scss 10
static/
└── scss/
└── etc/
└── libraries/ 2
└── plugins/ 9
└── sprites-scss/ 4
└── common.scss 8
└── fonts.scss 5
└── GUI.scss 7
└── mixins.scss 3
└── normalize.scss 1
└── vars.scss 6
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
35
36. Собираем JS
• JSHint + JSCS
• Конкатинация
• Перенос отдельных файлов
• Удаление console.log, debugger и т.д.*
• Минификация (uglify)
• Добавление суффиксов min и hash
36
37. Собираем JS
• JSHint + JSCS
• Конкатинация
• Перенос отдельных файлов
• Удаление console.log, debugger и т.д.*
• Минифкация (uglify)
• Добавление суффиксов min и hash
37
38. Порядок сборки JS
modules/
└── */moduleName.js 5
static/
└── js/
└── framework/ 1
└── libraries/ 2
└── plugins/ 3
??? 4,6
01.
02.
03.
04.
05.
06.
07.
08.
38
48. Системные таски
├── gulpfile.js # gulpfile сборщика
├── tars-config.js # Конфигурационный файл
├── package.json # Зависимости TARS
├── user-package.json # Пользовательские пакеты
└── tars/ # Таски и хелперы для gulp
└── helpers/ # Хелперы
└── tasks/ # Основные таски
└── user-tasks/ # Пользовательские таски
└── watchers/ # Основные вотчеры
└── user-watchers/ # Пользовательские вотчеры
└── markup/ # Основная папка с проектом
└── docs/ # Документация
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
48
49. Пользовательские таски
├── gulpfile.js # gulpfile сборщика
├── tars-config.js # Конфигурационный файл
├── package.json # Зависимости TARS
├── user-package.json # Пользовательские пакеты
└── tars/ # Таски и хелперы для gulp
└── helpers/ # Хелперы
└── tasks/ # Основные таски
└── user-tasks/ # Пользовательские таски
└── watchers/ # Основные вотчеры
└── user-watchers/ # Пользовательские вотчеры
└── markup/ # Основная папка с проектом
└── docs/ # Документация
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
49
50. Структура вотчера
require dependencies;
module.exports = function(watchOptions) {
return chokidar.watch('markup/controller/*.js', {
ignored: '',
persistent: true,
ignoreInitial: true
}).on('all', function(event, path) {
watcherLog(event, path);
gulp.start('js:processing');
});
};
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
50
51. Системные вотчеры
├── gulpfile.js # gulpfile сборщика
├── tars-config.js # Конфигурационный файл
├── package.json # Зависимости TARS
├── user-package.json # Пользовательские пакеты
└── tars/ # Таски и хелперы для gulp
└── helpers/ # Хелперы
└── tasks/ # Основные таски
└── user-tasks/ # Пользовательские таски
└── watchers/ # Основные вотчеры
└── user-watchers/ # Пользовательские вотчеры
└── markup/ # Основная папка с проектом
└── docs/ # Документация
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
51
52. Пользовательские вотчеры
├── gulpfile.js # gulpfile сборщика
├── tars-config.js # Конфигурационный файл
├── package.json # Зависимости TARS
├── user-package.json # Пользовательские пакеты
└── tars/ # Таски и хелперы для gulp
└── helpers/ # Хелперы
└── tasks/ # Основные таски
└── user-tasks/ # Пользовательские таски
└── watchers/ # Основные вотчеры
└── user-watchers/ # Пользовательские вотчеры
└── markup/ # Основная папка с проектом
└── docs/ # Документация
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
52
57. Сколько выигрываем по времени
По-старому С TARS
HTML 8 часов 5.5 часов
Работа с графикой 6 часов 2 часа
JS и CSS 10 часов 8 часов
Поддержка проекта 2 часа 30 минут
57
59. Планы на будущее
• Gulp 4
• Добавить шаблонизаторы
• Добавить пре- и пост-процессоров для css
• ES6
• Browserify/webpack
• Другой workflow для SVG
59
60. Планы на будущее
• Gulp 4
• Добавить шаблонизаторы
• Добавить пре- и пост-процессоров для css
• ES6
• Browserify/webpack/systemJs
• Другой workflow для SVG
• ...
60
