title: Django's 'collectstatic' with Gulp
body: <p>I've recently adopted Gulp within my Django workflow but I am kind of stumped regarding the storage of my static files.</p>
  
  <p>At the moment, I have my Django's <a href="https://docs.djangoproject.com/en/dev/ref/settings/#std:setting-STATIC_ROOT" rel="nofollow"><code>STATIC_ROOT</code></a> set to <code>E:/path/to/project/collectstatic/</code>. So, after I run <code>python src/manage.py collectstatic</code>; my static files are collected as intended. However, I have my <code>gulpfile.js</code> configured so that a variety of tasks are executed on the files within my <code>collectedstaic</code> directory. The output of this - which results in various minified and concatenated files - end up within a new directory, <code>E:/path/to/project/static/</code>.</p>
  
  <p>Sadly, when the site's <a href="https://docs.djangoproject.com/en/dev/ref/settings/#std:setting-STATIC_URL" rel="nofollow"><code>STATIC_URL</code></a> is accessed, the static files are being obtained from the <code>collectedstatic</code> directory; not the <code>static</code> directory as I would want.</p>
  
  <p>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?</p>
  
  <p><strong><code>gulpfile.js</code></strong></p>
  
  <pre class="lang-js prettyprint-override"><code>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']);
  });
  </code></pre>