Зачем собирать статику?
Во-первых, это красиво
Зачем собирать статику
- Компиляция
(вы пишете на чистом CSS/JS?) - Универсальность
(а префиксы вендоров помните?) - Экономия соединений
(их всё ещё 6-8 на хост) - Объём данных
(мобильные никто не отменял) - Вечный кэш
(проблема инвалидации решена!)
Зачем собирать статику
Где-то я это уже видел
RUBY ON RAILS
Чем собирать?
Хороший вопрос!
Чем собирать?
Чем собирать?
Ближе к телу
| Plugins | Speed | Flexibility | Scaffold | |
|---|---|---|---|---|
| Brunch | ± | × | ||
| Grunt | × | ± | ± | |
| Gulp | × | × | × | |
| Broccoli | ± | ± |
Gulp
- Текстовые потоки
- Один плагин — одна задача
- Code over configuration
- Простой API
- Очень простой API
UNIX philosophy
- Пишите программы, которые делают что-то одно и делают это хорошо.
- Пишите программы, которые бы работали вместе.
- Пишите программы, которые бы поддерживали текстовые потоки, поскольку это универсальный интерфейс
Gulpfile.coffee
Потоки
API
- gulp.task – описывает задачу
- gulp.watch — смотрит за файлами
- gulp.src — преобразует файлы в поток
- gulp.dest — преобразует поток в файлы
Под капотом
- Orchestrator – управление зависимостями и последовательностями задач
- Vynil – работа с файловой системой
О чём, бишь, я?
- Компиляция
- Универсальность
- Экономия соединений
- Объём данных
- Вечный кэш
- Sass
- Coffeescript
Компиляция: Sass → CSS
Ruby Sass vs. libsass
Ноябрь 2014 — libsass научилась готовить Sass 3.0
Разница в скорости компиляции ≈ 2,5 раза
Компиляция: Sass → CSS
Универсальность
Объём данных
Вечный кэш
- styles.css → styles-be57b00b.css
- location ~ ^/assets/.*-([^.]+)\.(js|css)$ { expires max; }
Бесплатный бонус
А если ещё сжать?
location ~ ^/assets/.*-([^.]+)\.(js|css)$ { gzip_static on; }
Coffescript
А то же самое!
- Компилируем
- Склеиваем
- Минифицируем
- Штампуем
- Сжимаем