Flask-assets support

Bundle and minify css and js.

README.rst

@@ -14,6 +14,7 @@ Features
 - Procfile for deploying to a PaaS (e.g. Heroku)
 - nose for testing
 - A simple ``manage.py`` script.
+- CSS and JS minification using Flask-Assets
 - Easily switch between development and production environments through the MYFLASKAPP_ENV system  variable.
 
 Screenshots

{{cookiecutter.repo_name}}/.gitignore

@@ -40,3 +40,9 @@ output/*/index.html
 
 # Sphinx
 docs/_build
+
+.webassets-cache
+
+# Virtualenvs
+env
+env*

{{cookiecutter.repo_name}}/requirements/prod.txt

@@ -1,12 +1,25 @@
 # Everything that needed in production
+
+# Flask
 Flask==0.10.1
-Flask-SQLAlchemy==1.0
-Flask-WTF==0.9.2
-Jinja2==2.7
 MarkupSafe==0.18
+Werkzeug==0.9.4
+Jinja2==2.7
+itsdangerous==0.23
+
+# Database
+Flask-SQLAlchemy==1.0
 SQLAlchemy==0.8.2
+
+# Forms
+Flask-WTF==0.9.2
 WTForms==1.0.4
-Werkzeug==0.9.4
+
+# Deployment
 gunicorn==17.5
-itsdangerous==0.23
 wsgiref==0.1.2
+
+# Assets
+Flask-Assets==0.8
+cssmin>=0.1.4
+jsmin>=2.0.4

{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/app.py

@@ -2,6 +2,10 @@
 import os
 from flask import Flask
 from flask.ext.sqlalchemy import SQLAlchemy
+from flask.ext.assets import Environment
+from webassets.loaders import PythonLoader
+
+from {{cookiecutter.repo_name}} import assets
 
 app = Flask(__name__)
 # The environment variable, either 'prod' or 'dev'
@@ -11,3 +15,10 @@ app.config.from_object('{{cookiecutter.repo_name}}.settings.{env}Config'
                         .format(env=env.capitalize()))
 app.config['ENV'] = env
 db = SQLAlchemy(app)
+
+# Register asset bundles
+assets_env = Environment()
+assets_env.init_app(app)
+assets_loader = PythonLoader(assets)
+for name, bundle in assets_loader.load_bundles().iteritems():
+    assets_env.register(name, bundle)

{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/assets.py

@@ -0,0 +1,20 @@
+# -*- coding: utf-8 -*-
+from flask.ext.assets import Bundle
+
+common_css = Bundle(
+    "libs/bootstrap3/css/bootstrap.min.css",
+    "css/style.css",
+    filters="cssmin",
+    output="public/css/common.css"
+)
+
+common_js = Bundle(
+    "libs/jquery2/jquery-2.0.3.min.js",
+    "libs/bootstrap3/js/bootstrap.min.js",
+    "js/plugins.js",
+    Bundle(
+        "js/script.js",
+        filters="jsmin"
+    ),
+    output="public/js/common.js"
+)

{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/main.py

@@ -4,7 +4,7 @@
 Entry point for all things, to avoid circular imports.
 """
 import os
-from .app import app, db
+from .app import app, db, assets_env
 from .models import *
 from .views import *
 

{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/_layouts/base.html

@@ -20,9 +20,10 @@
   <!-- Mobile viewport optimized: h5bp.com/viewport -->
   <meta name="viewport" content="width=device-width">
 
-  <link rel="stylesheet" href="{{ url_for('static', filename='libs/bootstrap3/css/bootstrap.min.css') }}">
+  {% assets "common_css" %}
+    <link rel="stylesheet" href="{{ ASSET_URL }}">
+  {% endassets %}
 
-  <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
   {% block css %}{% endblock %}
 
 </head>
@@ -58,15 +59,11 @@
 
 {% include "_layouts/footer.html" %}
 
-
 <!-- JavaScript at the bottom for fast page loading -->
-<script src="{{ url_for('static', filename='libs/jquery2/jquery-2.0.3.min.js') }}"></script>
+{% assets "common_js" %}
-<script src="{{ url_for('static', filename='libs/bootstrap3/js/bootstrap.min.js') }}"></script>
+    <script type="text/javascript" src="{{ ASSET_URL }}"></script>
-
+{% endassets %}
-
+{% block js %}{% endblock %}
-<script src="{{ url_for('static', filename='js/plugins.js') }}"></script>
-<script src="{{ url_for('static', filename='js/script.js') }}"></script>
-
 <!-- end scripts -->
 {% endblock %}
 </body>