我最近在Django工作流程中采用了Gulp,但是对于存储静态文件我有些困惑.

目前,我将Django的STATIC_ROOT设置为E：/ path / to / project / collectstatic /.因此,在我运行python src / manage.py collectstatic之后；我的静态文件已按预期收集.但是,我已配置了gulpfile.js,以便对collectedstaic目录中的文件执行各种任务.此文件的输出-导致生成多个缩小和串联的文件-最终位于新目录E：/ path / to / project / static /中.

可悲的是,当访问站点的STATIC_URL时,静态文件是从collectedstatic目录中获取的；不是我想要的静态目录.

无论如何,他们是否将文件的收集目录和服务目录分开？或者,有人可以为我配置Gulp文件提供更好的方法吗？

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']);
});

解决方法:

由于集成Gulp：https://github.com/edx/ecommerce的复杂性,我们选择主要使用Django Compressor.

> build.js将我们所有的JS依赖项收集到一个已知位置.
> STATICFILES_DIRS已更新为首先查看此位置(如果在开发时忘记删除此目录,则可能会出现问题).
>模板继续照常引用SCSS和JS文件.
> Django Compressor负责(a)编译SCSS和(b)缩小所有资产. (Compressor也可以编译CoffeeScript.)

我们仅使用Gulp来运行测试和质量检查.我们对collectstatic和compress的调用如下所示：

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