Flask-Assets 사용 방법 (2)

1편에서는 flask에서 webassets을 사용하는 방법을 다루었습니다.

이번에는 static 폴더에 있는 파일 목록을 가져와 assets에 등록하는 과정을 다뤄보겠습니다.

import os
from flask_assets import Bundle
from __init__ import assets

css_files = os.listdir(os.getcwd() + '/static/assets/css')
js_files = os.listdir(os.getcwd() + '/static/assets/js')

# CSS files 
for css in css_files:
    file_name = css.split('.')
    bundle = Bundle('assets/css/'+css, filters='cssmin', output='gen/'+file_name[0]+".min."+file_name[1])
    assets.register(file_name[0]+"_"+file_name[1], bundle)

# JavaScript files 
for js in js_files:
    if not js.startswith('.') and os.path.isfile(os.getcwd()+'/static/assets/js/'+js):
        file_name = js.split('.')
        bundle = Bundle('assets/js/'+js, filters='jsmin', output='gen/'+file_name[0]+".min."+file_name[1])
        assets.register(file_name[0]+"_"+file_name[1], bundle)

5,6. css, js 파일을 넣어둔 경로의 파일 목록을 리스트 형태로 가져옵니다.

이런 형태의 리스트가 생성됩니다.
css_files = [‘index.css’, ‘footer.css’, ‘nav.css’, …]

10, 파일명을 .을 기준으로 나눠서 확장자와 파일명을 구분한 뒤 ex) file_name = [‘index’, ‘css’]

11, Bundle 인스턴스로 만들어 줍니다.
12, assets 인스턴스에 등록

그 아래로는 JavaScript 파일도 똑같이 해주면 됩니다. 다만 저는 js폴더에 다른 폴더가 있고, 숨김처리된 파일이 있어

if not js.startswith('.') and os.path.isfile(os.getcwd()+'/static/assets/js/'+js):

위 줄을 추가 했습니다.


처음에는 assets 파일이 하나 하나 추가될때마다 아래와 같이 직접 쓰다보니 관리하기가 힘들어져서 위와 같은 방식으로 해보게 됐습니다.

box_css = Bundle('assets/css/herebox.css', filters='cssmin', output='gen/herebox.min.css')
assets.register('herebox_css', herebox_css)
herebox_mobile_css = Bundle('assets/css/herebox_mobile.css', filters='cssmin', output='gen/herebox_mobile.min.css')
assets.register('herebox_mobile_css', herebox_mobile_css)
completion_js = Bundle('assets/js/completion.js', filters='jsmin', output='gen/completion.min.js')
assets.register('completion_js', completion_js)
delivery_payment_js = Bundle('assets/js/delivery_payment.js', filters='jsmin', output='gen/delivery_payment.min.js')
assets.register('delivery_payment_js', delivery_payment_js)
delivery_reservation_js = Bundle('assets/js/delivery_reservation.js', filters='jsmin', output='gen/delivery_reservation.min.js')
assets.register('delivery_reservation_js', delivery_reservation_js)
delivery_review_js = Bundle('assets/js/delivery_review.js', filters='jsmin', output='gen/delivery_review.min.js')
assets.register('delivery_review_js', delivery_review_js)
estimate_js = Bundle('assets/js/estimate.js', filters='jsmin', output='gen/estimate.min.js')
assets.register('estimate_js', estimate_js)
extended_completion_js = Bundle('assets/js/extended_completion.js', filters='jsmin', output='gen/extended_completion.min.js')
assets.register('extended_completion_js', extended_completion_js)
extended_estimate_js = Bundle('assets/js/extended_estimate.js', filters='jsmin', output='gen/extended_estimate.min.js')
assets.register('extended_estimate_js', extendㅇimate_js)
extended_payment_js = Bundle('assets/js/extended_payment.js', filters='jsmin', output='gen/extended_payment.min.js')
assets.register('extended_payment_js', extended_payment_js)
extended_review_js = Bundle('assets/js/extended_review.js', filters='jsmin', output='gen/extended_review.min.js')
assets.register('extended_review_js', extended_review_js)
hbcounter_js = Bundle('assets/js/hbcounter.js', filters='jsmin', output='gen/hbcounter.min.js')
assets.register('hbcounter_js', hbcounter_js)

참고 문서