mirror of
https://github.com/cookiecutter/cookiecutter-django.git
synced 2024-11-22 09:36:52 +03:00
Upgrade JS dependencies and upgrade to node 16 (#3400)
This commit is contained in:
Bruno Alla
GitHub
parent
ca14c3db56
commit
9f359939a9
7
.github/workflows/ci.yml
vendored
7
.github/workflows/ci.yml
vendored
|
|
@ -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 }}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
-------
|
||||
|
|
|
|||
|
|
@ -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/
|
||||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
FROM node:10-stretch-slim
|
||||
FROM node:16-bullseye-slim
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
{% block css %}
|
||||
{%- endraw %}{% if cookiecutter.custom_bootstrap_compilation == "n" %}{% raw %}
|
||||
<!-- Latest compiled and minified Bootstrap CSS -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.1/css/bootstrap.min.css" integrity="sha512-6KY5s6UI5J7SVYuZB4S/CZMyPylqyyNZco376NM2Z8Sb8OxEdp02e1jkKk/wZxIEmjQ6DRCEBhni+gpr9c4tvA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" integrity="sha512-GQGU0fMMi238uA+a/bdWJfpUGKUkBdgfFdgBm72SUQ6BeyWjoY/ton0tEjH+OSH9iP4Dfh+7HM0I9f5eR0L/4w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||
{%- endraw %}{% endif %}{% raw %}
|
||||
|
||||
<!-- Your stuff: Third-party CSS libraries go here -->
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
{%- endraw %}{% if cookiecutter.use_compressor == "y" %}{% raw %}{% endcompress %}{% endraw %}{% endif %}{% raw %}
|
||||
{%- endraw %}{% else %}{% raw %}
|
||||
<!-- Bootstrap JS -->
|
||||
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.1/js/bootstrap.min.js" integrity="sha512-ewfXo9Gq53e1q1+WDTjaHAGZ8UvCWq0eXONhwDuIoaH8xz2r96uoAYaQCm1oQhnBfRXrvJztNXFsTloJfgbL5Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js" integrity="sha512-OvBgP9A2JBgiRad/mM36mkzXSXaJE9BEIENnVEmeZdITvwT09xnxLtT4twkCa8m/loMbPHsvPl0T8lRGVBwjlQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<!-- Your stuff: Third-party javascript libraries go here -->
|
||||
{%- endraw %}{% endif %}{% raw %}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user