Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Над чем работаю• Инфопортал info.2gis.ru
• Techno techno.2gis.ru
• Лендинги и promo
2
Я сильнострадал
Копипаст html
Подготовкаграфики
Все должно бытьминифицировано
Минифицируем• Графику
• JS
• CSS
• HTML
10
Нужен помощник
Хотелось• Автоматизировать все
• Использовать уже существующие наработки
• Базовый набор функций
• Удобный инструмент
• Кроссплатформенность
12
Ищем готовоерешение
Что нашлось1. Headstart
2. JS App Starter
3. INIT
4. FireShell, FastShell
5. Html5boilerplate, Web Starter Kit
6. ...
14
Тогда появился
Основные фичи• Gulp
• Выбор шаблонизатора (Jade, Handlebars, html*)
• Выбор css-препроцессора (SCSS, LESS, Stylus, css*)
• Данные отдельно от шаблона
• Модульный, легко расширяемый
16
Основные фичи• Работа с графикой на раз, два, три
• Конфиг на все случаи жизни
• Хорошая документация
• Создание архива готовой сборки
• и многое другое...
17
Основные команды• gulp init
• gulp или gulp build
• gulp dev
18
Основные команды• gulp init
• gulp или gulp build (--min, --release, --ie8)
• gulp dev (--lr, --tunnel, --ie8)
19
Структурасборщика
├── 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
Модулии страницы
Структура модуля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
Примериспользования
Верстаем меню
25
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
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
Используем готовый модуль<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
Поговоримо статике
Структура папки для статикиstatic/
└── fonts/ # Шрифты
└── img/ # Картинки
└── js/ # Js
└── misc/ # Различные дополнительные файлы
└── scss/ # А тут стили
01.
02.
03.
04.
05.
06.
30
Структура папки для статикиstatic/
└── fonts/# Шрифты
└── img/# Картинки
└── js/# Js
└── misc/# Различные дополнительные файлы
└── scss/# А тут стили
01.
02.
03.
04.
05.
06.
31
JS и CSS
Собираем CSS• Генерация стилей спрайтов
• Конкатинация
• Компилирование в CSS
• Autoprefixer
• Сжатие
• Добавление суффиксов min и hash
33
Собираем CSS• Генерация стилей спрайтов
• Конкатинация
• Компилирование в CSS
• Autoprefixer
• Сжатие
• Добавление суффиксов min и hash
34
Порядок сборки CSSmodules/
└── */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
Собираем JS• JSHint + JSCS
• Конкатинация
• Перенос отдельных файлов
• Удаление console.log, debugger и т.д.*
• Минификация (uglify)
• Добавление суффиксов min и hash
36
Собираем JS• JSHint + JSCS
• Конкатинация
• Перенос отдельных файлов
• Удаление console.log, debugger и т.д.*
• Минифкация (uglify)
• Добавление суффиксов min и hash
37
Порядок сборки JSmodules/
└── */moduleName.js 5
static/
└── js/
└── framework/ 1
└── libraries/ 2
└── plugins/ 3
??? 4,6
01.
02.
03.
04.
05.
06.
07.
08.
38
О картинках
Всего два миксина
@include bg($png-image-name); #png-sprite
@include bg-svg($svg-image-name); #svg-sprite
01.
02.
42
Исходник SVG-файлы gulp-svg...
Спрайт
imagemin
SVG
SVG
SVG
Спрайт Спрайт
CSS CSS
main.css
PNG
gulp-concat
Спрайт
imagemin
PNGPNG
Спрайт Спрайт
CSS CSS
main-ie8.cssgulp-concat
spritesmithPNG-файлы
svg2png
Исходник SVG-файлы gulp-svg...
Спрайт
imagemin
SVG
SVG
SVG
Спрайт Спрайт
CSS CSS
main.css
PNG
gulp-concat
Спрайт
imagemin
PNGPNG
Спрайт Спрайт
CSS CSS
main-ie8.cssgulp-concat
spritesmithPNG-файлы
svg2png
О таскахи вотчерах
Структура таска
47
Системные таски├── 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
Пользовательские таски├── 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
Структура вотчера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
Системные вотчеры├── 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
Пользовательские вотчеры├── 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
Модульность — это удобно!
Результаты
Что получилось• Автоматизируем по полной
• Все в одном
• Модульная структура
• Удобное API
56
Сколько выигрываем по времениПо-старому С TARS
HTML 8 часов 5.5 часов
Работа с графикой 6 часов 2 часа
JS и CSS 10 часов 8 часов
Поддержка проекта 2 часа 30 минут
57
Планы набудущее
Планы на будущее• Gulp 4
• Добавить шаблонизаторы
• Добавить пре- и пост-процессоров для css
• ES6
• Browserify/webpack
• Другой workflow для SVG
59
Планы на будущее• Gulp 4
• Добавить шаблонизаторы
• Добавить пре- и пост-процессоров для css
• ES6
• Browserify/webpack/systemJs
• Другой workflow для SVG
• ...
60
ПрисылайтеPull request'ы
Создавайте issues
Используйте TARS,уменьшите уровень рутины до 0%
Артем Малко
@malko_artem
https://github.com/artem_malko/tars
Related Documents
