[英]Django's 'collectstatic' with Gulp
我最近在我的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
目录; 不是我想要的static
目录。
他们无论如何要分开收集文件的目录和服务的目录? 或者,有没有人有更好的方法来配置我的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的复杂性,我们选择主要使用Django Compressor: https : //github.com/edx/ecommerce 。
STATICFILES_DIRS
以首先查看此位置(如果您在开发时忘记删除此目录,则可能会出现问题)。 我们只使用Gulp来进行测试和质量检查。 我们对collectstatic
和compress
调用如下所示:
$ $(NODE_BIN)/r.js -o build.js $ python manage.py collectstatic --noinput -v0 $ python manage.py compress -v0
你可以使用django-gulp ,它可以同时运行runserver和collectstatic。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.