CODEWITHSUNDEEP
pythondjangogulpbower
Braden1996
Braden1996

Reputation: 108

Django's 'collectstatic' with Gulp

I've recently adopted Gulp within my Django workflow but I am kind of stumped regarding the storage of my static files.

At the moment, I have my Django's STATIC_ROOT set to E:/path/to/project/collectstatic/. So, after I run python src/manage.py collectstatic; my static files are collected as intended. However, I have my gulpfile.js configured so that a variety of tasks are executed on the files within my collectedstaic directory. The output of this - which results in various minified and concatenated files - end up within a new directory, E:/path/to/project/static/.

Sadly, when the site's STATIC_URL is accessed, the static files are being obtained from the collectedstatic directory; not the static directory as I would want.

Is their anyway to separate the directory in which files are collected and in which they're served? Or, does anybody have a better way for me to configure my Gulp file?

gulpfile.js

var gulp = require('gulp');
var autoprefixer = require('gulp-autoprefixer');
var bowerlib = require('bower-files')();
var coffee = require('gulp-coffee');
var concat = require('gulp-concat');
var del = require('del');
var gzip = require('gulp-gzip');
var rename = require('gulp-rename');
var minifycss = require('gulp-minify-css');
var watch = require('gulp-watch');
var shell = require('gulp-shell');
var uglify = require('gulp-uglify');
var gutil = require('gulp-util');
var sass = require('gulp-sass');

var OPTIONS = {
  COLLECTSTATIC: {
    watch: 'src/**/static/**/*.*'
  },

  CSS: {
    src: 'collectedstatic/**/css/**/*.css',
    dest: 'static',
    watch: 'collectedstatic/**/css/**/*.css'
  },

  SCSS: {
    src: 'collectedstatic/scss/main.scss',
    dest: 'static/css',
    filename: "main.css",
    include: ['./bower_components/foundation/scss'],
    watch: 'collectedstatic/scss/**/*.scss'
  },

  BOWERJS: {
    dest: 'static/js',
    filename: "lib.js",
  },

  JS: {
    src: 'collectedstatic/**/js/**/*.js',
    dest: 'static',
    watch: 'collectedstatic/**/js/**/*.js'
  },

  COFFEE: {
    src: 'collectedstatic/coffee/**/*.coffee',
    dest: 'static/js',
    filename: "main.js",
    watch: 'collectedstatic/coffee/**/*.coffee'
  },

  GZIP: {
    threshold: '1kb',
    gzipOptions: {
      level: 9
    }
  },

  DEL: ['collectedstatic', 'static']
}

// Delete task
gulp.task('delete', function() {
  del(OPTIONS.DEL);
});

// Execute collectstatic
gulp.task('collectstatic', shell.task([
  'python src/manage.py collectstatic --noinput'
]));

// Compile our CSS
gulp.task('css', function() {
  return gulp.src(OPTIONS.CSS['src'])
    .pipe(autoprefixer())
    .pipe(minifycss())
    .pipe(gzip(OPTIONS.GZIP))
    .pipe(gulp.dest(OPTIONS.CSS['dest']))
});

// Compile our SCSS
gulp.task('scss', function() {
  return gulp.src(OPTIONS.SCSS['src'])
    .pipe(sass().on('error', gutil.log))
    .pipe(autoprefixer())
    .pipe(gulp.dest(OPTIONS.SCSS['dest']))
    .pipe(rename({suffix: '.min'}))
    .pipe(minifycss())
    .pipe(gulp.dest(OPTIONS.SCSS['dest']))
    .pipe(gzip(OPTIONS.GZIP))
    .pipe(gulp.dest(OPTIONS.SCSS['dest']))
});

// Compile Bower JavaScript
gulp.task('bowerjs', function() {
  return gulp.src(bowerlib.ext('js').files)
    .pipe(concat(OPTIONS.BOWERJS['filename']))
    .pipe(gulp.dest(OPTIONS.BOWERJS['dest']))
    .pipe(rename({suffix: '.min'}))
    .pipe(uglify())
    .pipe(gzip(OPTIONS.GZIP))
    .pipe(gulp.dest(OPTIONS.BOWERJS['dest']))
});

// Compile our JavaScript
gulp.task('js', function() {
  return gulp.src(OPTIONS.JS['src'])
    .pipe(uglify())
    .pipe(gulp.dest(OPTIONS.JS['dest']))
});

// Compile our CoffeeScript
gulp.task('coffee', function() {
  return gulp.src(OPTIONS.COFFEE['src'])
    .pipe(coffee({bare: true}).on('error', gutil.log))
    .pipe(uglify())
    .pipe(concat(OPTIONS.COFFEE['filename']))
    .pipe(gulp.dest(OPTIONS.COFFEE['dest']))
});

// Default task
gulp.task('default', ['delete', 'collectstatic'], function() {
  gulp.start('css');
  gulp.start('scss');
  gulp.start('js');
  gulp.start('coffee');
});

// Watch Files For Changes
gulp.task('watch', ['default'], function() {
  gulp.watch(OPTIONS.COLLECTSTATIC['watch'], ['collectstatic']);
  gulp.watch(OPTIONS.CSS['watch'], ['css']);
  gulp.watch(OPTIONS.SCSS['watch'], ['scss']);
  gulp.watch(OPTIONS.JS['watch'], ['js']);
  gulp.watch(OPTIONS.COFFEE['watch'], ['coffee']);
});

Upvotes: 4

Views: 3470

Answers (2)

Hardik
Hardik

Reputation: 834

You could use django-gulp which works with both runserver and collectstatic.

Upvotes: 2

Clinton Blackburn
Clinton Blackburn

Reputation: 436

We opted to primarily use Django Compressor due to the complexity of integrating Gulp: https://github.com/edx/ecommerce.

  1. build.js gathers all of our JS dependencies into a known location.
  2. STATICFILES_DIRS is updated to look at this location first (which can be problematic if your forget to remove this directory when developing).
  3. Templates continue to reference SCSS and JS files as normal.
  4. Django Compressor is responsible for (a) compiling SCSS and (b) minifying all assets. (Compressor can also compile CoffeeScript.)

We only use Gulp to to run tests and quality checks. Our calls to collectstatic and compress look like this:

$ $(NODE_BIN)/r.js -o build.js $ python manage.py collectstatic --noinput -v0 $ python manage.py compress -v0

Upvotes: 2

Related Questions