Add front-end tools for development and production

[JackMorganNZ]

Using front-end tools can allow us to do the following:

• Compile Sass into CSS, including autoprefixer support.
• Compile JavaScript with Browserify.
• Add sourcemaps for our compiled JavaScript and CSS.
• Minify images with imagemin.
• Reload the browser automatically on JavaScript (and/or template) changes.
• Refresh the CSS without reloading the browser on CSS changes.
• Trigger system notifications when Sass or JavaScript has errors.
• Minify JavaScript and CSS for production deploy.

and finally:

• Generate a build folder where all the generated files are stored.

From: https://lincolnloop.com/blog/integrating-front-end-tools-your-django-project/

These tasks are extremely useful, especially the compiling of SASS into CSS. Using SASS for this project is essentially a requirement for easier web development (especially as we plan to use the SASS files from Bootstrap 4 Alpha 6).

There are many options that I'm discovering on how to solve this issue (for both development and production), I've compile a list of links (which I'll keep adding to) of useful resources to read. Quotes are copied from product websites.

This issue replaces #27 #28, but may be effected by the choice in #38.

Django Packages

Django Compressor

Django Compressor processes, combines and minifies linked and inline Javascript or CSS in a Django template into cacheable static files. It supports compilers such as coffeescript, LESS and SASS and is extensible by custom processing steps.

• https://github.com/django-compressor/django-compressor

Django Pipeline

Pipeline is an asset packaging library for Django, providing both CSS and JavaScript concatenation and compression, built-in JavaScript template support, and optional data-URI image and font embedding.

• https://github.com/jazzband/django-pipeline

Comparison

• https://www.reddit.com/r/django/comments/2f97e7/django_compressor_or_pipeline/ (Sept 2014)
• https://www.reddit.com/r/django/comments/3wq43j/djangopipeline_or_djangocompressor/ (Dec 2015)

Task Runners

Grunt

Why use a task runner?
In one word: automation. The less work you have to do when performing repetitive tasks like minification, compilation, unit testing, linting, etc, the easier your job becomes. After you've configured it through a Gruntfile, a task runner can do most of that mundane work for you—and your team—with basically zero effort.

• http://gruntjs.com/
• https://lincolnloop.com/blog/simplifying-your-django-frontend-tasks-grunt/ (Jan 2014 - Switch to Gulp in later post, see link below)

Gulp

gulp is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something. By preferring code over configuration, node best practices, and a minimal API surface - gulp makes things simple like never before.

• https://lincolnloop.com/blog/integrating-front-end-tools-your-django-project/

Comparison

• http://www.hongkiat.com/blog/gulp-vs-grunt/ (2017?)
• https://medium.com/@preslavrachev/gulp-vs-grunt-why-one-why-the-other-f5d3b398edc4 (Jan 2015)
• https://www.keithcirkel.co.uk/why-we-should-stop-using-grunt/ (Oct 2014)

Webpack

webpack is a tool to build JavaScript modules in your application. To start using webpack from its cli or api, follow the Installation instructions. webpack simplifies your workflow by quickly constructing a dependency graph of your application and bundling them in the right order. webpack can be configured to customise optimisations to your code, to split vendor/css/js code for production, run a development server that hot-reloads your code without page refresh and many such cool features.

• https://webpack.js.org/
• http://blog.andrewray.me/webpack-when-to-use-and-why/
• https://egghead.io/lessons/javascript-intro-to-webpack (haven't watched yet)
• http://owaislone.org/blog/webpack-plus-reactjs-and-django/
• https://github.com/owais/django-webpack-loader/
• https://github.com/owais/webpack-bundle-tracker

Comparison

• http://stackoverflow.com/questions/35062852/npm-vs-bower-vs-browserify-vs-gulp-vs-grunt-vs-webpack
• http://owaislone.org/blog/modern-frontends-with-django/ (compares everything above)
• Consider django-pipeline over webpack: Consider django-pipeline over webpack pinax/pinax#95

Related Reading

• https://12factor.net/