diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 169af527..cb3a9660 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -60,6 +60,8 @@ jobs:
script:
- name: With Celery
args: "use_celery=y use_compressor=y"
+ - name: With Gulp
+ args: "js_task_runner=Gulp custom_bootstrap_compilation=y"
name: "${{ matrix.script.name }} Bare metal"
services:
@@ -83,6 +85,9 @@ jobs:
- uses: actions/checkout@v2
- uses: actions/setup-python@v2
with:
- python-version: 3.9
+ python-version: "3.9"
+ - uses: actions/setup-node@v2
+ with:
+ node-version: "16"
- name: Bare Metal ${{ matrix.script.name }}
run: sh tests/test_bare.sh ${{ matrix.script.args }}
diff --git a/docs/developing-locally.rst b/docs/developing-locally.rst
index 88a71b30..a9a54a03 100644
--- a/docs/developing-locally.rst
+++ b/docs/developing-locally.rst
@@ -154,8 +154,24 @@ To run Celery locally, make sure redis-server is installed (instructions are ava
Sass Compilation & Live Reloading
---------------------------------
-If you’d like to take advantage of live reloading and Sass compilation you can do so with a little
-bit of preparation, see :ref:`sass-compilation-live-reload`.
+If you've opted for Gulp as JS task runner, the project comes configured with `Sass`_ compilation and `live reloading`_. As you change you Sass/JS source files, the task runner will automatically rebuild the corresponding CSS and JS assets and reload them in your browser without refreshing the page.
+
+#. Make sure that `Node.js`_ v16 is installed on your machine.
+#. In the project root, install the JS dependencies with::
+
+ $ npm install
+
+#. Now - with your virtualenv activated - start the application by running::
+
+ $ npm run dev
+
+ The app will now run with live reloading enabled, applying front-end changes dynamically.
+
+.. note:: The task will start 2 processes in parallel: the static assets build loop on one side, and the Django server on the other. You don NOT need to run Django as your would normally with ``manage.py runserver``.
+
+.. _Node.js: http://nodejs.org/download/
+.. _Sass: https://sass-lang.com/
+.. _live reloading: https://browsersync.io
Summary
-------
diff --git a/docs/live-reloading-and-sass-compilation.rst b/docs/live-reloading-and-sass-compilation.rst
deleted file mode 100644
index a55b4fd8..00000000
--- a/docs/live-reloading-and-sass-compilation.rst
+++ /dev/null
@@ -1,24 +0,0 @@
-.. _sass-compilation-live-reload:
-
-Sass Compilation & Live Reloading
-=================================
-
-If you'd like to take advantage of `live reload`_ and Sass compilation:
-
-- Make sure that nodejs_ is installed. Then in the project root run::
-
- $ npm install
-
-.. _nodejs: http://nodejs.org/download/
-
-- Now you just need::
-
- $ npm run dev
-
-The base app will now run as it would with the usual ``manage.py runserver`` but with live reloading and Sass compilation enabled.
-When changing your Sass files, they will be automatically recompiled and change will be reflected in your browser without refreshing.
-
-To get live reloading to work you'll probably need to install an `appropriate browser extension`_
-
-.. _live reload: http://livereload.com/
-.. _appropriate browser extension: http://livereload.com/extensions/
diff --git a/tests/test_bare.sh b/tests/test_bare.sh
index 1f52d91b..53162f91 100755
--- a/tests/test_bare.sh
+++ b/tests/test_bare.sh
@@ -35,3 +35,13 @@ pre-commit run --show-diff-on-failure -a
# run the project's tests
pytest
+
+if [ -f "package.json" ]
+then
+ npm install
+ if [ -f "gulpfile.js" ]
+ then
+ npm run build
+ fi
+fi
+
diff --git a/{{cookiecutter.project_slug}}/compose/local/node/Dockerfile b/{{cookiecutter.project_slug}}/compose/local/node/Dockerfile
index f9976e20..8062fa68 100644
--- a/{{cookiecutter.project_slug}}/compose/local/node/Dockerfile
+++ b/{{cookiecutter.project_slug}}/compose/local/node/Dockerfile
@@ -1,4 +1,4 @@
-FROM node:10-stretch-slim
+FROM node:16-bullseye-slim
WORKDIR /app
diff --git a/{{cookiecutter.project_slug}}/compose/production/django/Dockerfile b/{{cookiecutter.project_slug}}/compose/production/django/Dockerfile
index fa969f1c..1dd47a2f 100644
--- a/{{cookiecutter.project_slug}}/compose/production/django/Dockerfile
+++ b/{{cookiecutter.project_slug}}/compose/production/django/Dockerfile
@@ -1,7 +1,7 @@
ARG PYTHON_VERSION=3.9-slim-bullseye
{% if cookiecutter.js_task_runner == 'Gulp' -%}
-FROM node:10-stretch-slim as client-builder
+FROM node:16-bullseye-slim as client-builder
ARG APP_HOME=/app
WORKDIR ${APP_HOME}
diff --git a/{{cookiecutter.project_slug}}/gulpfile.js b/{{cookiecutter.project_slug}}/gulpfile.js
index 06d2cde1..387a137a 100644
--- a/{{cookiecutter.project_slug}}/gulpfile.js
+++ b/{{cookiecutter.project_slug}}/gulpfile.js
@@ -19,7 +19,7 @@ const plumber = require('gulp-plumber')
const postcss = require('gulp-postcss')
const reload = browserSync.reload
const rename = require('gulp-rename')
-const sass = require('gulp-sass')
+const sass = require('gulp-sass')(require('sass'))
const spawn = require('child_process').spawn
const uglify = require('gulp-uglify-es').default
diff --git a/{{cookiecutter.project_slug}}/package.json b/{{cookiecutter.project_slug}}/package.json
index ed3f724e..ac868d95 100644
--- a/{{cookiecutter.project_slug}}/package.json
+++ b/{{cookiecutter.project_slug}}/package.json
@@ -5,25 +5,27 @@
"devDependencies": {
{% if cookiecutter.js_task_runner == 'Gulp' -%}
{% if cookiecutter.custom_bootstrap_compilation == 'y' -%}
- "bootstrap": "5.1.1",
+ "bootstrap": "^5.1.3",
"gulp-concat": "^2.6.1",
- "@popperjs/core": "2.9.2",
+ "@popperjs/core": "^2.10.2",
{% endif -%}
- "autoprefixer": "^9.4.7",
- "browser-sync": "^2.14.0",
- "cssnano": "^4.1.10",
- "gulp": "^4.0.0",
- "gulp-imagemin": "^5.0.3",
+ "autoprefixer": "^10.4.0",
+ "browser-sync": "^2.27.7",
+ "cssnano": "^5.0.11",
+ "gulp": "^4.0.2",
+ "gulp-imagemin": "^7.1.0",
"gulp-plumber": "^1.2.1",
- "gulp-postcss": "^8.0.0",
- "gulp-rename": "^1.2.2",
- "gulp-sass": "^4.0.2",
- "gulp-uglify-es": "^1.0.4",
- "pixrem": "^5.0.0"
+ "gulp-postcss": "^9.0.1",
+ "gulp-rename": "^2.0.0",
+ "gulp-sass": "^5.0.0",
+ "gulp-uglify-es": "^3.0.0",
+ "pixrem": "^5.0.0",
+ "postcss": "^8.3.11",
+ "sass": "^1.43.4"
{%- endif %}
},
"engines": {
- "node": "10"
+ "node": "16"
},
"browserslist": [
"last 2 versions"
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/templates/base.html b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/templates/base.html
index 133a0dcc..408696b2 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/templates/base.html
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/templates/base.html
@@ -13,7 +13,7 @@
{% block css %}
{%- endraw %}{% if cookiecutter.custom_bootstrap_compilation == "n" %}{% raw %}
-
+
{%- endraw %}{% endif %}{% raw %}
@@ -37,7 +37,7 @@
{%- endraw %}{% if cookiecutter.use_compressor == "y" %}{% raw %}{% endcompress %}{% endraw %}{% endif %}{% raw %}
{%- endraw %}{% else %}{% raw %}
-
+
{%- endraw %}{% endif %}{% raw %}