Twig: ν¬ν•¨λœ 슀크립트 Unglify / μΆ•μ†Œ

에 λ§Œλ“  2017λ…„ 01μ›” 16일  Β·  3μ½”λ©˜νŠΈ  Β·  좜처: twigphp/Twig

Symfony 2.8 ν”„λ‘œμ νŠΈμ—μ„œ Assetic을 μ‚¬μš©ν•  λ•Œ μ—°κ²°λœ JavaScript 및 CSS νŒŒμΌμ„ μ••μΆ•ν•˜λŠ” 것은 큰 λ¬Έμ œκ°€ μ•„λ‹™λ‹ˆλ‹€. κ·ΈλŸ¬λ‚˜ 슀크립트 νƒœκ·Έλ₯Ό μ‚¬μš©ν•˜μ—¬ νŽ˜μ΄μ§€/ν…œν”Œλ¦Ώμ— 직접 ν¬ν•¨λœ μŠ€ν¬λ¦½νŠΈλŠ” μ–΄λ–»μŠ΅λ‹ˆκΉŒ? μ΄λŸ¬ν•œ μŠ€ν¬λ¦½νŠΈλŠ” μ–΄λ–€ μ‹μœΌλ‘œλ“  μˆ˜μ •λ˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.

μ΄λŸ¬ν•œ μŠ€ν¬λ¦½νŠΈλ„ μ••μΆ•/μˆ˜μ •/좔적할 수 μžˆμŠ΅λ‹ˆκΉŒ?

λ¬Όλ‘  μ΄λŸ¬ν•œ 슀크립트λ₯Ό λ³„λ„μ˜ 파일둜 μ΄λ™ν•˜μ—¬ μžμ‚° 필터도 μ μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€. κ·ΈλŸ¬λ‚˜ μ–΄λ–€ κ²½μš°μ—λŠ” HTML/Twig ν…œν”Œλ¦Ώ λ‚΄μ—μ„œ 직접 슀크립트λ₯Ό μ‚¬μš©ν•˜λŠ” 것이 νŽΈλ¦¬ν•©λ‹ˆλ‹€.

TwigλŠ” μ΄λŸ¬ν•œ 슀크립트λ₯Ό μ΄λ™ν•˜μ§€ μ•Šκ³  필터링할 수 μžˆλŠ” μ†”λ£¨μ…˜μ„ μ œκ³΅ν•©λ‹ˆκΉŒ?

λͺ¨λ“  3 λŒ“κΈ€

ν…œν”Œλ¦Ώ λ Œλ”λ§ 쀑에 이λ₯Ό μˆ˜ν–‰ν•˜λŠ” μ‚¬μš©μž μ •μ˜ νƒœκ·Έλ₯Ό μž‘μ„±ν•  수 μžˆμŠ΅λ‹ˆλ‹€. κ·ΈλŸ¬λ‚˜ λ Œλ”λ§ μ‹œ μˆ˜ν–‰ν•˜λŠ” 경우 μ•½κ°„ 더 큰 HTML 응닡을 λ‹€μš΄λ‘œλ“œν•˜λŠ” 것보닀 λΉ λ₯΄μ§€ μ•Šμ„ 수 μžˆμœΌλ―€λ‘œ μ„±λŠ₯ 영ν–₯에 μ£Όμ˜ν•˜μ‹­μ‹œμ˜€.
큰 슀크립트 νƒœκ·Έκ°€ μžˆλŠ” 경우 λ³„λ„μ˜ 파일둜 μ΄λ™ν•˜λŠ” 것이 캐싱에 더 μ’‹μŠ΅λ‹ˆλ‹€(λŒ€μ‹  λΉŒλ“œ μ‹œ μ••μΆ•ν•©λ‹ˆλ‹€.

λ‚˜λŠ” Twigκ°€ 이것을 ν¬ν•¨ν•˜μ§€ μ•Šμ„ 것이라고 μƒκ°ν•©λ‹ˆλ‹€. κ·ΈλŸ¬λ‚˜ μžμ‹ λ§Œμ˜ μ†”λ£¨μ…˜μ„ μ‰½κ²Œ λ§Œλ“€ 수 μžˆμŠ΅λ‹ˆλ‹€. ν•œ μ‘μš© ν”„λ‘œκ·Έλž¨μ—μ„œ λ‹€μŒ μ½”λ“œλ₯Ό μ‚¬μš©ν•©λ‹ˆλ‹€.

<style>
    {{ minify(include('css/homepage.css')) }}
</style>

λŒ€μ‹  include() 당신은 λ˜ν•œ μ‚¬μš©ν•  μˆ˜μžˆλŠ” source() . 그리고 minify() μ‚¬μš©μž μ •μ˜ ν•¨μˆ˜λŠ” https://github.com/matthiasmullie/minify 라이브러리의 래퍼일 λΏμž…λ‹ˆλ‹€.

    use MatthiasMullie\Minify\CSS;

    new \Twig_SimpleFunction('minify', [$this, 'minifyCss'], ['is_safe' => ['html']]),

    public function minifyCss($content)
    {
        $minifier = new CSS();
        $minifier->add($content);

        return $minifier->minify();
    }

Twig core에 μ†ν•˜λŠ” κΈ°λŠ₯μ΄λ―€λ‘œ μ’…λ£Œν•©λ‹ˆλ‹€.

이 νŽ˜μ΄μ§€κ°€ 도움이 λ˜μ—ˆλ‚˜μš”?
0 / 5 - 0 λ“±κΈ‰