0

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

  1. 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?
  2. 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']);
});
wraasch
  • 405
  • 3
  • 13

0 Answers0