I am having trouble with updating the css, img, fonts, and js admin files when I upgrade Django. I first noticed this when I upgraded to Django 2.0 (see here), and now the problem is worsening as I upgrade to 4.0.
The backend functionality is working perfectly well. But now when I access the admin console, the homepage remains on the top of the browser page, even when I navigate to different models.
I noticed that none of the /static/admin/ files (css, js, img, fonts) were updated on my local machine when upgrading from Django 2.2.24 to 4.0. Should I have expected these files to update along with Django? Am I missing a step to ensure that the admin static files are updated to reflect the newest version of Django?
Attempted Fixes
- I have run
collectstatic
, but it looks like that is simply copying my local static/admin files to AWS S3, where I normally store static files. Should I not have static/admin files on my local machine? - I copied the static/admin files from Django.contrib
cp -a /Users/username/.virtualenvs/rs/lib/python3.9/site-packages/django/contrib/admin/. /Users/username/Documents/myproject/static/
. This actually worked, but seems a bit hacky. I must not be doing something right for these files to not update upon Django upgrade.
I should note that I am using gulp.js
. Could this be a problem when I run collectstatic
? Here is my gulpfile:
const gulp = require('gulp');
const util = require('gulp-util');
const plumber = require('gulp-plumber');
const tap = require('gulp-tap');
const del = require('del');
const sass = require('gulp-sass');
const cssnano = require('gulp-cssnano');
const autoprefixr = require('gulp-autoprefixer');
const buffer = require('vinyl-buffer');
const uglify = require('gulp-uglify');
const babelify = require('babelify');
const browserify = require('browserify');
const concat = require('gulp-concat');
const runSequence = require('run-sequence');
const gulpif = require('gulp-if');
gulp.task('clean', function () {
return del([
'static/img/**/*',
'static/css/**/*',
'static/js/**/*'
]);
});
gulp.task('sass', function () {
const config = {
src: ['./assets/styles/myproject.scss', './assets/styles/myproject-dashboard.scss'],
dest: './static/css',
sass: {
includePaths: [
'node_modules/bootstrap-sass/assets/stylesheets'
]
},
autoprefixr: {
browsers: ['last 4 versions'],
cascade: false
}
};
return gulp.src(config.src)
.pipe(plumber())
.pipe(sass(config.sass))
.pipe(autoprefixr(config.autoprefixr))
.pipe(gulpif(util.env.production, cssnano()))
.pipe(plumber.stop())
.pipe(gulp.dest(config.dest));
});
gulp.task('images', function () {
return gulp.src('./assets/images/**/*')
.pipe(gulp.dest('./static/img'));
});
gulp.task('vendor-scripts', function () {
const config = {
src: [
'./node_modules/jquery/dist/jquery.min.js',
'./node_modules/bootstrap-sass/assets/javascripts/bootstrap.min.js',
'./node_modules/responsive-toolkit/dist/bootstrap-toolkit.min.js',
'./node_modules/jquery-circle-progress/dist/circle-progress.min.js',
],
dest: './static/js/vendor'
};
return gulp.src(config.src)
// .pipe(concat('vendor.js'))
.pipe(gulp.dest(config.dest));
});
gulp.task('scripts', function () {
const config = {
src: './assets/scripts/**/*.js',
dest: './static/js/'
};
return gulp.src(config.src, { read: false }) // no need of reading file because browserify does.
.pipe(plumber())
// transform file objects using gulp-tap plugin
.pipe(tap(function (file) {
// replace file contents with browserify's bundle stream
file.contents = browserify({
entries: file.path,
transform: [babelify],
paths: [
'./node_modules/'
]
}).bundle();
}))
// transform streaming contents into buffer contents
.pipe(buffer())
.pipe(gulpif(util.env.production, uglify()))
.pipe(plumber.stop())
.pipe(gulp.dest(config.dest));
});
gulp.task('build', ['sass', 'vendor-scripts', 'scripts', 'images']);
gulp.task('default', ['watch']);
gulp.task('watch', ['sass', 'vendor-scripts', 'scripts', 'images'], function () {
gulp.watch('./assets/styles/**/*.scss', ['sass']);
gulp.watch('./assets/images/**/*', ['images']);
gulp.watch('./assets/scripts/**/*.js', ['scripts']);
});