Django-compressor: ์ˆ˜์ง‘, ์—ฐ๊ฒฐ ๋ฐ *๊ทธ๋ฆฌ๊ณ * ํ•„ํ„ฐ์— ์ „๋‹ฌํ•˜์‹œ๊ฒ ์Šต๋‹ˆ๊นŒ?

์— ๋งŒ๋“  2011๋…„ 04์›” 15์ผ  ยท  6์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: django-compressor/django-compressor

์•ˆ๋…•ํ•˜์„ธ์š”! ์–ด์จŒ๋“  ํŠน์ • ๋ธ”๋ก์—์„œ CSS ๋˜๋Š” JS๋ฅผ ์ˆ˜์ง‘ํ•˜๊ณ  ์—ฐ๊ฒฐํ•˜๊ณ  _๊ทธ๋Ÿฌ๋ฉด_ ํ•„ํ„ฐ ์ฒด์ธ์„ ํ†ตํ•ด ์ „๋‹ฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ? ํŠนํžˆ pyScss๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ SCSS๋ฅผ ์ฒ˜๋ฆฌํ•˜๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค. pySCSSFilter ํ™•์žฅ FilterBase ๋งŒ๋“ค์—ˆ์œผ๋ฉฐ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์ •๋ง ํ•˜๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค.

{% compress css %}
<link rel="stylesheet" type="text/css" media="screen" href="{{ MEDIA_URL }}css/mixins.scss" />
<link rel="stylesheet" type="text/css" media="screen" href="{{ MEDIA_URL }}css/base.scss" />
<link rel="stylesheet" type="text/css" media="screen" href="{{ MEDIA_URL }}css/other.scss" />
{% endcompress %}

๊ทธ๋Ÿฌ๋‚˜ ๋ฌผ๋ก  ๋‚ด ํŒŒ์ผ์ด ์„œ๋กœ ๊ฒฉ๋ฆฌ๋˜์–ด ์ฒ˜๋ฆฌ๋˜๋ฏ€๋กœ ์ž‘๋™ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

๋ฐฉ๋ฒ•์ด ์žˆ๋‚˜์š”?

๊ฑด๋ฐฐ!

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

CSS ์ „์ฒ˜๋ฆฌ๊ธฐ๋ฅผ ๋œ ์‚ฌ์šฉํ•  ๋•Œ 'ํ•ต์‹ฌ' ๊ธฐ๋Šฅ์ด ๋ฏน์Šค์ธ์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜๋Š” ๊ฒƒ์ด ๋งค์šฐ ์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ํ•„ํ„ฐ๋ฅผ ํ†ตํ•ด ์ฒ˜๋ฆฌํ•˜๊ธฐ ์ „์— ํŒŒ์ผ์„ ์—ฐ๊ฒฐํ•˜๋Š” ๊ฒƒ์€ ํ•„์ˆ˜ ๊ธฐ๋Šฅ์ž…๋‹ˆ๋‹ค. @jannon ์š”์ฒญ์„ dev ๋ถ„๊ธฐ django_compressor๋กœ ๋ณ‘ํ•ฉํ•  ๊ณ„ํš์ด ์žˆ์Šต๋‹ˆ๊นŒ?

๋ชจ๋“  6 ๋Œ“๊ธ€

ํ  ๊ทธ๊ฒŒ ๋ฐ”๋กœ ๋‚ด๊ฐ€ ์›ํ•˜์ง€ ์•Š๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

๋™์ผํ•œ ๊ธฐ๋ณธ ๊ฒฝ๋กœ์— ์žˆ์ง€ ์•Š๊ณ  ๋™์ผํ•œ @import ๋ฌธ์ด ์žˆ์ง€๋งŒ ๋‹ค๋ฅธ ๊ฒฝ๋กœ์— ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ๋‹ค๋ฅธ ํŒŒ์ผ์„ ์ฐธ์กฐํ•˜๋Š” ๊ฒฝ์šฐ์—๋Š” ์–ด๋–ป๊ฒŒ

์ง€๊ธˆ์€ @import ๊ฐ€ ์ž‘๋™ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ํŒŒ์ผ ๋‚ด์šฉ์ด ํ”„๋กœ์„ธ์„œ์— ์ „๋‹ฌ๋˜๊ธฐ ์ „์— ์ž„์‹œ ํŒŒ์ผ์— ๊ธฐ๋ก๋˜๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค.

ํŒŒ์ผ์„ ํ•˜๋‚˜์”ฉ ์ฒ˜๋ฆฌํ•œ ๋‹ค์Œ ์—ฐ๊ฒฐํ•˜์—ฌ ์ปดํŒŒ์ผ์— ๋Œ€ํ•œ ๋ชจ๋“  ์ฐธ์กฐ๊ฐ€ ์ •ํ™•ํ•˜๋„๋ก ํ•ฉ๋‹ˆ๋‹ค.

๋ฏธ๋ฆฌ ์ปดํŒŒ์ผํ•˜๊ธฐ ์ „์— ํŒŒ์ผ์„ ์—ฐ๊ฒฐํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ๋‘ ๋ฒˆ์งธ๋กœ ํˆฌํ‘œํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. ํ‘œ์ค€์€ ๋ฏน์Šค์ธ๊ณผ ์ „์—ญ ๋ณ€์ˆ˜๋ฅผ ํ•˜๋‚˜์˜ ํŒŒ์ผ์— ์œ ์ง€ํ•˜๊ณ  ์ปดํŒŒ์ผํ•˜๊ธฐ ์ „์— ๋ณ‘ํ•ฉํ•˜๋Š” ๊ฒƒ์ด๊ธฐ ๋•Œ๋ฌธ์— less ๋“ฑ์„ ์‚ฌ์šฉํ•  ๋•Œ ๋งค์šฐ ์œ ์šฉํ•ฉ๋‹ˆ๋‹ค. ์ง€๊ธˆ ๋‹น์žฅ์€ ๋ชจ๋“  CSS ํŒŒ์ผ์—์„œ ํ•ด๋‹น ๋ณ€์ˆ˜์™€ ๋ฏน์Šค์ธ์„ ๋ฐ˜๋ณตํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์ฆ‰, ์—ฌ๋Ÿฌ CSS ํŒŒ์ผ์—์„œ ์‚ฌ์šฉ๋˜๋Š” ์Šคํ‚จ ์ƒ‰์ƒ ์ „์—ญ ๋ณ€์ˆ˜ ์ง‘ํ•ฉ์ด ์žˆ๋Š” ๊ฒฝ์šฐ sass ๋˜๋Š” ๊ทธ ์ดํ•˜์™€ ๊ฐ™์€ CSS ํ”„๋ ˆ์ž„์›Œํฌ์—์„œ ์ „์—ญ ๋ณ€์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋ชฉ์ ์„ ๋ง์น  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. , ๋ชจ๋“  ๊ฒƒ์„ ํ•˜๋‚˜์˜ ํŒŒ์ผ์— ๋ณด๊ด€ํ•˜์ง€ ์•Š๋Š” ํ•œ.

๋‚˜๋Š” hvdklauw๊ฐ€ ์–ธ๊ธ‰ํ•œ ๋ฌธ์ œ๋ฅผ ์ดํ•ดํ•˜๋ฏ€๋กœ ์‚ฌ์ „ ์ปดํŒŒ์ผ ์ „์ด๋‚˜ ํ›„์— ๋ณ‘ํ•ฉํ• ์ง€ ์—ฌ๋ถ€์— ๊ด€๊ณ„์—†์ด ๊ฐ ์••์ถ• ๋ธ”๋ก์˜ ์˜ต์…˜์ด ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ?

@gensmann ์••์ถ• ๋ธ”๋ก์— ์˜ต์…˜์„ ์ถ”๊ฐ€ํ•˜๋Š” ๊ฒƒ์€ ๊ณ„ํš์ฒ˜๋Ÿผ ๋“ค๋ฆฝ๋‹ˆ๋‹ค.

CSS ์ „์ฒ˜๋ฆฌ๊ธฐ๋ฅผ ๋œ ์‚ฌ์šฉํ•  ๋•Œ 'ํ•ต์‹ฌ' ๊ธฐ๋Šฅ์ด ๋ฏน์Šค์ธ์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜๋Š” ๊ฒƒ์ด ๋งค์šฐ ์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ํ•„ํ„ฐ๋ฅผ ํ†ตํ•ด ์ฒ˜๋ฆฌํ•˜๊ธฐ ์ „์— ํŒŒ์ผ์„ ์—ฐ๊ฒฐํ•˜๋Š” ๊ฒƒ์€ ํ•„์ˆ˜ ๊ธฐ๋Šฅ์ž…๋‹ˆ๋‹ค. @jannon ์š”์ฒญ์„ dev ๋ถ„๊ธฐ django_compressor๋กœ ๋ณ‘ํ•ฉํ•  ๊ณ„ํš์ด ์žˆ์Šต๋‹ˆ๊นŒ?

Sass์™€ ๊ด€๋ จํ•˜์—ฌ ์ด์— ๋Œ€ํ•œ ๋‚˜์˜ ์ ‘๊ทผ ๋ฐฉ์‹์€ sass ๋ฐ”์ด๋„ˆ๋ฆฌ์— ๋Œ€ํ•œ ๋ชจ๋“  ํฌํ•จ ๊ฒฝ๋กœ๋ฅผ ์ •์˜ํ•œ ๋‹ค์Œ ๋‚ด scss ํŒŒ์ผ์˜ ๋‹ค๋ฅธ ํŒŒ์ผ์„ @import ์ •์˜ํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

# app/settings/common.py
...
scss_args = " ".join(["--include-path %s/vendor/bourbon/app/assets/stylesheets/" % VENDOR_ROOT,
                      "--include-path %s/vendor/bootstrap-sass-official/vendor/assets/stylesheets/" % VENDOR_ROOT])
...

COMPRESS_PRECOMPILERS = (
    ('text/coffeescript', 'node_modules/.bin/coffee --compile --stdio'),
    ('text/x-scss', 'node_modules/.bin/node-sass %s {infile} {outfile}' % scss_args)
)
...
// app/common/static/css/screen.scss
<strong i="9">@import</strong> url("http://fonts.googleapis.com/css?family=Montserrat:400,700");
<strong i="10">@import</strong> "./vendor.scss";
<strong i="11">@import</strong> "./elements.scss";
<strong i="12">@import</strong> "./pages.scss";

body, html {
    font-family: 'Montserrat';
}
// app/common/static/css/vendor.scss
<strong i="15">@import</strong> "_bourbon.scss";
<strong i="16">@import</strong> "bootstrap.scss";
<! -- app/common/templates/base.html -->
...
{% compress css %}
<link href="{% static 'css/screen.scss' %}" type='text/x-scss' media='screen, projector' rel='stylesheet'>
{% endcompress %}
...

@airtonix ์ด ์ž‘์—…์„ ์‹œ์ž‘ํ–ˆ์ง€๋งŒ @import 'ed ํŒŒ์ผ์— ๋Œ€ํ•œ ๋ณ€๊ฒฝ ์‚ฌํ•ญ์€ ๊ฐ์‹œ๋˜์ง€ ์•Š์œผ๋ฏ€๋กœ ๋ชจ๋“  CSS ๋ณ€๊ฒฝ ์‚ฌํ•ญ์— ๋Œ€ํ•ด ์„œ๋ฒ„๋ฅผ ๋‹ค์‹œ ์‹œ์ž‘ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.
์ด ๊ธฐ๋Šฅ์ด ์•„์ง ๊ตฌํ˜„๋˜์ง€ ์•Š์•˜๋‹ค๋Š” ์‚ฌ์‹ค์— ๋†€๋ž์Šต๋‹ˆ๋‹ค. webassets ๋Š” ์ด ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜์—ฌ ์‚ฌ์šฉ์ž๊ฐ€ SASS_AS_OUTPUT = True ๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜์—ฌ ์„ ํƒ์ ์œผ๋กœ ํŒŒ์ผ์„ ๋จผ์ € ์—ฐ๊ฒฐํ•ฉ๋‹ˆ๋‹ค.

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰