rev-assets

Make possible to use hashed static assets generated by tools like Gulp or Webpack


Keywords
assets-management, assets-manifest, gulp, python, webpack
License
BSD-1-Clause
Install
pip install rev-assets==1.0.3

Documentation

RevAssets

Build Status

You care about the performance of your site, so you've configured the web server to cache all your assets for a long time. The most used way to bypass that cache when deploying a new version, is to add a hash of the assets to their names.

'scripts/home.js' --> 'scripts/home.1a23b.js'
'styles/home.css' --> 'styles/home.aef45.css'

The problem is, now your Python web app can't find the file unless you manually –and painstakingly— update all the URLs in the templates.

<script src="{{ url_for('static', filename='scripts/home.js') }}></script>
<link rel="stylesheet" href="{{ url_for('static', filename='styles/home.css') }}</script>

Whit this library, there is no need for that. Just change your templates to:

<script src="{{ 'scripts/home.js' | asset_url }}></script>
<link rel="stylesheet" href="{{ 'styles/home.css' | asset_url }}</script>

and use this code:

# app.py
from flask import Flask, render_template
from rev_assets import RevAssets

app = flask.Flask(__name__)

rev = RevAssets(reload=app.config.DEBUG)
app.jinja_env.filters['asset_url'] = rev.asset_url

@app.route('/')
def index():
    return render_template('index.html')

if __name__ == '__main__':
    # Required to bypass Jinja's internal cache
    app.run(extra_files=[rev.manifest])

and it will work for every version of the assets that you build.

This works by reading the manifest.json generated by the revision tool (so don't forget to configure your task runner to make one).

You can continue to use the old method to link un-versioned assets, like favicon.ico and others like it.

Note that this is not a Flask extension, but a Python library. You can use it with any other framework. You can also have many instances of RevAssets linked to differents manifests.

Parameters

rev = RevAssets([base_url], [reload], [manifest], [quiet])
base_url: (/static) Prefix for the found assets. Can be a local path or a different domain, like a CDN.
reload: (False) Reload the manifest file eash time an asset is requested
manifest: (manifest.json) Relative or absolute path to a JSON file that maps the source files to the hashed versions. Eg.: scripts/home.js to scripts/home.1a23b.js.
quiet: (True) If False, a missing asset will raise an exception. If True, an empty string will be returned instead.

An example config file for Gulp.js

It doesn't matter what task runner do you use, as long as it's configured to generate a manifest.json file. However, it's not always easy to do it. So this is a working gulpfile.js you can use it to process your assets or take as a reference.

With this config:

  • All the .scss (sass) files in static/styles are compiled to CSS, autoprefixed, minified, sourcemapped, hashed an copied into static/build/styles.
  • All the javascript files in static/scripts are compiled from ES6 Javascript to ES5 (the one all browsers understand), minified, sourcemapped, hashed an copied into static/build/scripts. You might want to add here a browserify step.
  • The images in static/images are optimized, hashed and copied into static/build/images.
  • The font files in static/fonts are hashed and copied into static/build/fonts.
  • Then, every reference to this names in your final CSS files, are updated so the relative url(...) continue to work.
  • And, of course, a global manifest.json is generated for all of them.

See ``gulpfile.js`` and ``package.json``.

Run the tests

We use some external dependencies, listed in requirements_tests.txt:

$  pip install -r requirements-tests.txt
$  python setup.py develop

To run the tests in your current Python version do:

$  make test

To run them in every supported Python version do:

$  tox

Our test suite runs continuously on Travis CI with every update.

Contributing

  1. Check for open issues or open a fresh issue to start a discussion around a feature idea or a bug.
  2. Fork the RevAssets repository on Github to start making your changes.
  3. Write a test which shows that the bug was fixed or that the feature works as expected.
  4. Send a pull request and bug the maintainer until it gets merged and published. :) Make sure to add yourself to AUTHORS.

copyright: Juan-Pablo Scaletti.
license: BSD-3-Clause, see LICENSE.