This page uses static assets generated by Gulp. Hopefully stuff will happen to the two list items below.

  1. If you can read this after a second or two, the Gulp-generated Javascript is NOT working
  2. If this text has a green background, Gulp CSS is working

How it works

These belong in a wiki when stable, but we might change it around a bit

  • The project contains a package.json. "npm install" in the current directory should install all the dependencies
  • Frontend code you want to build/check/whatever lives in frontend_src subdirectory. The convention in front-end-land seems to be just src, but that would confuse me. Happy to shorten it if people want
  • When you run the gulp command in the top directory on a server, it will create output files under project/static/assets/. ("assets seems to be a common name in the frontend world, so we will assume that it's only put there by the frontend tools. Don't create an assets folder under project/static.) You can then follow up with python manage.py collectstatic which will push them out to the right place
  • In development, start one terminal for python manage.py runserver and another for gulp eatch. So, we have two independent processes updating things, and you can just hit F5 to see your front end code update.
  • Run gulp test or npm test anywhere in the project to run the front end tests.

The gulp process is a lot faster than runserver restarting. So I don't think it will slow down development at all.

Some things we have in our gulp file

  • ES2015 transpiling
  • Creating minified, obfuscated JS (maybe only with a production flag) with sourcemaps
  • Front end test suite which does not require Django to be runnng