Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Build automation statics
Search
TriLan
April 09, 2014
Programming
0
1.5k
Build automation statics
TriLan
April 09, 2014
Tweet
Share
More Decks by TriLan
See All by TriLan
TopExpert
webdev2014
0
51
Secret formula management
webdev2014
1
65
Angular JS
webdev2014
0
1.5k
CSS animations and transitions
webdev2014
0
1.4k
Preprocessors CSS
webdev2014
1
1.5k
Mobile apps
webdev2014
0
1.5k
Gathering statistics of the department with the monitor output
webdev2014
0
1.5k
Creating interfaces in resource-limited settings
webdev2014
0
1.4k
Design vs usability
webdev2014
0
1.5k
Other Decks in Programming
See All in Programming
DMMプラットフォームがTiDB Cloudを採用した背景
pospome
9
4.2k
Apache Hive 4 on Treasure Data
ryukobayashi
1
410
ServerAction で Progressive Enhancement はどこまで頑張れるか? / progressive-enhancement-with-server-action
takefumiyoshii
6
390
Next.js App Router
quramy
11
1.6k
Milestoner
bkuhlmann
1
410
2 週間で Twitter Bot を作ってみた
contour_gara
0
760
Goのmultiple errorsについて (2024年4月版)
syumai
4
1.1k
デフォルトにして至高、RubyMineの大好きな所
ruzia
0
670
Elm Form Validation
bkuhlmann
0
510
Code Reviews
bkuhlmann
4
890
SIMD Parallel Programming with the Vector API
josepaumard
0
220
#phpcon_odawara オープン・クローズドなテストフィクスチャを求めて / open closed test fixtures
77web
3
240
Featured
See All Featured
RailsConf 2023
tenderlove
8
550
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
41
4.4k
Optimizing for Happiness
mojombo
370
69k
KATA
mclloyd
16
12k
What's new in Ruby 2.0
geeforr
337
31k
Writing Fast Ruby
sferik
622
60k
Rebuilding a faster, lazier Slack
samanthasiow
74
8.2k
The Straight Up "How To Draw Better" Workshop
denniskardys
228
130k
For a Future-Friendly Web
brad_frost
172
9k
[RailsConf 2023] Rails as a piece of cake
palkan
27
4k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
22
1.6k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
Transcript
Сборка статики
Препроцессоры
Препроцессоры решают одни и создают новые проблемы
Раньше было так — Редактируем код — Запускаем тесты
А стало так — Редактируем код — Компилируем его в
CSS/JS — Запускаем тесты
Варианты — Ручная компиляция — При сохранении файла — При
обновлении страницы
Отладка
Положение ошибки в сообщении косоли браузера не соответствует тому, где
она находится в исходном коде
Source maps (карты кода) позволяют указать соответствия между исходным и
скомпилированным кодом
Объединение файлов
Хочется разбить скрипты приложения на модули
Пример из проекта — CoffeeScript, Handlebars — 80 тысяч строк
кода — 1,3 тысячи файлов
Версионирование
Нет гарантий, что после обновления статики на сервере, она обновится
в браузере клиента
Версия в URL ресурса — http://example.com/static/css/style.css?v=1.1 — http://example.com/static/css/style.a6ebc32.css
Содержимое ресурса, доступного по URL’у, гарантированно не меняется
Кэшируем навсегда location /static/ { expires 1y; add_header Cache-Control public;
add_header ETag ""; alias /var/www/project/static/; }
Минификация и сжатие
Пример из проекта Без минификации и сжатия 4 Мб С
минификацией 2,4 Мб Со сжатием 450 Кб С минификацией и сжатием 330 Кб
Сжимаем заранее location /static/ { gzip_static on; expires 1y; add_header
Cache-Control public; add_header ETag ""; alias /var/www/project/static/; }
Системы сборки статики — Grunt (http://gruntjs.com) — Gulp (http://gulpjs.com) —
Sprockets (https://github.com/.../sprockets) — Gears (https://github.com/gears) (На самом деле их много)
Вопросы? —
[email protected]
— http://github.com/yumike — http://twitter.com/yumatov