Flask-Assets 사용 방법 (1)
우선 오늘 다룰 Flask-Assets이 무엇인지 먼저 알아봅시다.
Flask-Assets은 webassets을 우리가 만들고 있는 어플리케이션에 결합시킬 수 있도록 돕는 것이라 합니다.
그렇다면 webassets은 뭘까요? 구글에 검색해보니 Github 주소가 나오네요. 오픈소스인가 봅니다…
webassets - Asset management for Python
webassets은 일반적으로 웹 어플리케이션의 자산(CSS, JavaScript 파일 등)을 관리합니다. CSS, JS 파일 등을 하나로 합치고 minified 할 수도 있습니다. 그 밖에도 다양한 필터를 지원하고, CoffeScript, Sass 등 다른 컴파일러와도 함께 사용할 수 있습니다. 라고 하네요.
일단 홈페이지에 사용될 CSS, JS 파일을 관리할 수 있다는 것을 알았습니다.
설치방법은
$ pip install Flask-Assets
OR
$ easy_install Flask-Assets
사용법
Environment 인스턴스에 assets을 등록시키기
from flask import Flask
from flask_assets import Environment, Bundle
app = Flask(__name__)
assets = Environment(app)
js = Bundle('jquery.js', 'base.js', 'widgets.js', filters='jsmin',output='gen/packed.js')
assets.register('js_all', js)
js.build()
4, app == Flaks Application 인스턴스 생성
5, Environment 인스턴스 생성
7, Bundle이라는 아이는 webassets.py에 속한 클래스입니다. Bundle은 미디어 파일 그룹을 구성하는 데 사용됩니다. 어떤 필터를 적용할지 저장위치를 선택할 수도 있구요.
다시 7번째 줄을 보면 jquery.js, base.js, widgets.js 3개의 파일을 jsmin이라는 필터를 사용하여 gen/ 경로에 packed.js로 만들내도록 지정합니다. jsmin 필터는 자바스크립트 파일을 경량화시켜줍니다. 그리고 파일 개수를 3개에서 하나로 줄여 request수를 줄여 더욱 빠른 로딩을 할 수 있도록 도와줍니다.
Bundle의 인자를 좀 더 살펴보겠습니다.
filters = 1개 이상 적용 가능, 필터 미적용시 파일들이 merge되기만 함.
output = output file의 이름과 경로. source files이 저장됨.
9, assets인스턴스에 방금 만든 Bundle 인스턴스를 js_all이라는 이름으로 register메소드를 사용하여 등록하고 있습니다.
10, Bundle 인스턴스를 build() 하면 미리 정해둔 output의 위치에 파일이 생성됩니다. 파일을 생성하는 다른 방법으로는 커맨드라인을 사용하는 방식이 있습니다. 링크 참조.
Bundles(번들들, 묶인 파일들) 사용하기
방금 선언한 assets을 아래와 같은 방식으로 사용하시면 됩니다.
{% assets "js_all" %}
{% endassets %}