diff --git a/docs/developing-locally.rst b/docs/developing-locally.rst index 23bb7b9a8..b84da94c2 100644 --- a/docs/developing-locally.rst +++ b/docs/developing-locally.rst @@ -155,7 +155,7 @@ To run Celery locally, make sure redis-server is installed (instructions are ava Sass Compilation & Live Reloading --------------------------------- -If you've opted for Gulp as front-end pipeline, 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. +If you've opted for Gulp as front-end pipeline, the project comes configured with `Sass`_ compilation. As you change you Sass/JS source files, the task runner will automatically rebuild the corresponding CSS and JS assets. #. Make sure that `Node.js`_ v16 is installed on your machine. #. In the project root, install the JS dependencies with:: @@ -166,13 +166,12 @@ If you've opted for Gulp as front-end pipeline, the project comes configured wit $ npm run dev - The app will now run with live reloading enabled, applying front-end changes dynamically. + The app will now run Sass and javascript compilation. [django-browser-reload](https://github.com/adamchainz/django-browser-reload) will detect those changes and will refresh your current tab automatically .. 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 do 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/{{cookiecutter.project_slug}}/gulpfile.js b/{{cookiecutter.project_slug}}/gulpfile.js index 628b838ba..0317ac079 100644 --- a/{{cookiecutter.project_slug}}/gulpfile.js +++ b/{{cookiecutter.project_slug}}/gulpfile.js @@ -8,14 +8,12 @@ const pjson = require('./package.json') // Plugins const autoprefixer = require('autoprefixer') -const browserSync = require('browser-sync').create() const concat = require('gulp-concat') const cssnano = require ('cssnano') const imagemin = require('gulp-imagemin') const pixrem = require('pixrem') const plumber = require('gulp-plumber') const postcss = require('gulp-postcss') -const reload = browserSync.reload const rename = require('gulp-rename') const sass = require('gulp-sass')(require('sass')) const spawn = require('child_process').spawn @@ -123,42 +121,10 @@ function runServer(cb) { } {%- endif %} -// Browser sync server for live reload -function initBrowserSync() { - browserSync.init( - [ - `${paths.css}/*.css`, - `${paths.js}/*.js`, - `${paths.templates}/*.html` - ], { - {%- if cookiecutter.use_docker == 'y' %} - // https://www.browsersync.io/docs/options/#option-open - // Disable as it doesn't work from inside a container - open: false, - {%- endif %} - // https://www.browsersync.io/docs/options/#option-proxy - proxy: { - {%- if cookiecutter.use_docker == 'n' %} - target: '127.0.0.1:8000', - {%- else %} - target: 'django:8000', - {%- endif %} - proxyReq: [ - function(proxyReq, req) { - // Assign proxy "host" header same as current request at Browsersync server - proxyReq.setHeader('Host', req.headers.host) - } - ] - } - } - ) -} - // Watch function watchPaths() { watch(`${paths.sass}/*.scss`{% if cookiecutter.windows == 'y' %}, { usePolling: true }{% endif %}, styles) - watch(`${paths.templates}/**/*.html`{% if cookiecutter.windows == 'y' %}, { usePolling: true }{% endif %}).on("change", reload) - watch([`${paths.js}/*.js`, `!${paths.js}/*.min.js`]{% if cookiecutter.windows == 'y' %}, { usePolling: true }{% endif %}, scripts).on("change", reload) + watch([`${paths.js}/*.js`, `!${paths.js}/*.min.js`]{% if cookiecutter.windows == 'y' %}, { usePolling: true }{% endif %}, scripts) } // Generate all assets @@ -178,7 +144,6 @@ const dev = parallel( runServer, {%- endif %} {%- endif %} - initBrowserSync, watchPaths ) diff --git a/{{cookiecutter.project_slug}}/package.json b/{{cookiecutter.project_slug}}/package.json index bff0a34af..f9880f60a 100644 --- a/{{cookiecutter.project_slug}}/package.json +++ b/{{cookiecutter.project_slug}}/package.json @@ -7,7 +7,6 @@ "gulp-concat": "^2.6.1", "@popperjs/core": "^2.10.2", "autoprefixer": "^10.4.0", - "browser-sync": "^2.27.7", "cssnano": "^5.0.11", "gulp": "^4.0.2", "gulp-imagemin": "^7.1.0",