Set of add-ons for django-compressor that simply enables SCSS and ES6 in your Django project.
pip install django-compressor-toolkit
// settings.py
INSTALLED_APPS += ('compressor_toolkit',)
SCSS is a great language that saves your time and brings joy to CSS development.
The add-on does next: SCSS → ( node-sass + Autoprefixer ) → CSS.
It also enables Django static imports in SCSS, see the example below.
// settings.py
COMPRESS_PRECOMPILERS = (
('text/x-scss', 'compressor_toolkit.precompilers.SCSSCompiler'),
)
{# Django template #}
{% load compress %}
{% compress css %}
<link rel="stylesheet" type="text/x-scss" href="{% static 'app/layout.scss' %}">
{% endcompress %}
/* app/static/app/layout.scss */
@import "base/variables";
.title {
font: bold $title-size Arial, sans-serif;
}
/* base/static/base/variables.scss */
$title-size: 30px;
You need node-sass
, postcss-cli
and autoprefixer
to be installed. Quick install:
npm install node-sass postcss-cli autoprefixer
Or you can install them globally (you need to set COMPRESS_LOCAL_NPM_INSTALL = False
):
npm install -g node-sass postcss-cli autoprefixer
ES6 is a new standard for JavaScript that brings great new features.
The standard was approved in July 2015 and not all modern browsers fully support it for now. But there is a way to use it: transpilers that compile ES6 into good old ES5 syntax.
The add-on does next: ES6 → ( Browserify + Babelify ) → ES5.
It also enables Django static imports in ES6, see the example below.
// settings.py
COMPRESS_PRECOMPILERS = (
('module', 'compressor_toolkit.precompilers.ES6Compiler'),
)
{# Django template #}
{% load compress %}
{% compress js %}
<script type="module" src="{% static 'app/scripts.js' %}"></script>
{% endcompress %}
// app/static/app/scripts.js
import Framework from 'base/framework';
new Framework;
new Framework('1.0.1');
// base/static/base/framework.js
export let version = '1.0';
export default class {
constructor(customVersion) {
console.log(`Framework v${customVersion || version} initialized`);
}
}
You need browserify
, babelify
and babel-preset-es2015
to be installed. Quick install:
npm install browserify babelify babel-preset-es2015
Or you can install them globally (you need to set COMPRESS_LOCAL_NPM_INSTALL = False
):
npm install -g browserify babelify babel-preset-es2015
Whether you install required NPM packages locally.
Default: True
.
Path to node_modules
where babelify
, autoprefixer
, etc, libs are installed.
Default: ./node_modules
if COMPRESS_LOCAL_NPM_INSTALL
else /usr/lib/node_modules
.
node-sass
executable. It may be just the executable name (if it's on PATH
) or the executable path.
Default: ./node_modules/.bin/node-sass
if COMPRESS_LOCAL_NPM_INSTALL
else node-sass
.
postcss
executable. It may be just the executable name (if it's on PATH
) or the executable path.
Default: ./node_modules/.bin/postcss
if COMPRESS_LOCAL_NPM_INSTALL
else postcss
.
Browser versions config for Autoprefixer.
Default: ie >= 9, > 5%
.
Command that will be executed to transform SCSS into CSS code.
Default:
'{node_sass_bin} --output-style expanded {paths} "{infile}" "{outfile}" && '
'{postcss_bin} --use "{node_modules}/autoprefixer" --autoprefixer.browsers "{autoprefixer_browsers}" -r "{outfile}"'
Placeholders (i.e. they can be re-used in custom COMPRESS_SCSS_COMPILER_CMD
string):
{node_sass_bin}
- value fromCOMPRESS_NODE_SASS_BIN
{postcss_bin}
- value fromCOMPRESS_POSTCSS_BIN
{infile}
- input file path{outfile}
- output file path{paths}
- specially fornode-sass
, include all Django app static folders:--include-path=/path/to/app-1/static/ --include-path=/path/to/app-2/static/ ...
{node_modules}
- seeCOMPRESS_NODE_MODULES
setting{autoprefixer_browsers}
- value fromCOMPRESS_AUTOPREFIXER_BROWSERS
browserify
executable. It may be just the executable name (if it's on PATH
) or the executable path.
Default: ./node_modules/.bin/browserify
if COMPRESS_LOCAL_NPM_INSTALL
else browserify
.
Command that will be executed to transform ES6 into ES5 code.
Default:
'export NODE_PATH="{paths}" && '
'{browserify_bin} "{infile}" -o "{outfile}" '
'-t [ "{node_modules}/babelify" --presets="{node_modules}/babel-preset-es2015" ]'
Placeholders:
{browserify_bin}
- value fromCOMPRESS_BROWSERIFY_BIN
{infile}
- input file path{outfile}
- output file path{paths}
- specially forbrowserify
, include all Django app static folders:/path/to/app-1/static/:/path/to/app-2/static/:...
(likePATH
variable){node_modules}
- seeCOMPRESS_NODE_MODULES
setting
git clone https://github.com/kottenator/django-compressor-toolkit.git
cd django-compressor-toolkit
pip install -e '.[test]'
npm install
py.test