Автоматизация фронтенда — сегодня и завтра

Родной инструмент

• Низкий порог вхождения
• Бешеная популярность JavaScript
• Огромное сообщество

Автоматизируй все!

1. Быстродействие
2. Проверка кода
3. Тестирование
4. Разработка

Не Грантом единым

• Grunt - это конфиг
• Gulp - API

Первым делом

1. Сжатие CSS, HTML, JS
2. Спрайты - Smart Sprites, Spritesmith, SVG (grunt-svgstore)

Графика

• Imagemin, только по измененным файлам с grunt-newer
• SVGO
• WebP + grunt-webpcss + grunt-webp

CSS

• Умные компрессоры, как CSSO
• Объединение Media Query (grunt-combine-media-queries)
• Чистка лишнего CSS и JS (grunt-uncss, Google Closure)
• Генерация Critical CSS c запущенного сайта (penthouse)

Как мерить

• Google PageSpeed + Grunt
• Тесты c PhatnomJS или Selenium + Sauce Labs
• Скриншоты загрузки на медленных соединениях (grunt-load-perf)
• Сравнение веса ресурсов (grunt-compare-size)

Анализируем все

• JS Lint, Hint и сразу таблетка (grunt-fixmyjs)
• CSS Lint
• HTML inspector
• Coffee, Less, SCSS, JSON, jQuery

Немного помечтаем

• Автопроверка по списку требований
• Набор скриншотов из браузеров
• Проверка стиля кодирования (частично в html-inspector tests)

Тестирование

• Юнит-тестирование
• Тестирование быстродействия
• CSS/image-regression тесты
• Функциональное тестирование с Dalek.js

Быстрый старт

• Сервер
• Препроцессинг всего и EJS partials
• Билд

Пример проекта с Harp

Harp

• Harp express middleware
• harp.io - хостинг с деплоем из Dropbox
• Быстрый вывод в сеть с Finch (или ngrok)

Автоматизация автоматизации

• Codekit, Prepros App — препроцессинг, сервер, live reload
• Mixture + деплой, шаблонизация
• Codio + IDE

Стартовые заготовки

• Google Web Starter Kit
• Yeoman-генераторы
• Легкие обертки над технологиями — Lineman

Автоматизация фронтенда

• @operatino
• toHTML.it
• Мастер-класс в Киеве — bit.ly/kiev-automation

Слайды презентации — rhr.me/pres/automation