好吧,我想我有一个解决方法。这是假设您希望构建的文件也指向构建资产的静态 url。
这将要求您在视图上下文中定义一个 STATIC_URL(而不是使用src="{% static 'foo/bar.js' %}"
您将使用的src="{{STATIC_URL}}foo/bar.js"
)。{% static %}
如果不破解 grunt-usemin 源,我就无法开始工作。
所以使用你的例子,这个:
<!-- build:js {{STATIC_URL}}scripts/scripts.js -->
<script src="{{STATIC_URL}}scripts/app.js"></script>
<script src="{{STATIC_URL}}scripts/controllers/main.js"></script>
<script src="{{STATIC_URL}}scripts/controllers/stats.js"></script>
<script src="{{STATIC_URL}}scripts/directives/highchart.js"></script>
<!-- endbuild -->
编译为:
<script src="{{STATIC_URL}}scripts/scripts.js"></script>
为了实现这一点,我必须添加以下 grunt 配置(在 Gruntfile.js 中):
// custom createConfig script for replacing Django {{STATIC_URL}} references
// when building config for concat and cssmin
var path = require('path');
function createDjangoStaticConcatConfig(context, block) {
var cfg = {files: []};
var staticPattern = /\{\{\s*STATIC_URL\s*\}\}/;
block.dest = block.dest.replace(staticPattern, '');
var outfile = path.join(context.outDir, block.dest);
// Depending whether or not we're the last of the step we're not going to output the same thing
var files = {
dest: outfile,
src: []
};
context.inFiles.forEach(function(f) {
files.src.push(path.join(context.inDir, f.replace(staticPattern, '')));
});
cfg.files.push(files);
context.outFiles = [block.dest];
return cfg;
}
grunt.initConfig({
/*...*/
// add a preprocessor to modify the concat config to parse out {{STATIC_URL}} using the above method
useminPrepare: {
html: 'app/index.html',
options: {
dest: 'dist',
flow: {
steps: {
js: [
{
name: 'concat',
createConfig: createDjangoStaticConcatConfig
},
'uglifyjs'
],
// also apply it to css files
css: [
{
name: 'cssmin',
createConfig: createDjangoStaticConcatConfig
}
]
},
// this property is necessary
post: {}
}
}
},
// add a pattern to parse out the actual filename and remove the {{STATIC_URL}} bit
usemin: {
html: ['dist/{,*/}*.html'],
css: ['dist/styles/{,*/}*.css'],
options: {
assetsDirs: ['dist'],
patterns: {
html: [[/\{\{\s*STATIC_URL\s*\}\}([^'"]*)["']/mg, 'django static']]
}
}
},
// if you are using bower, also include the jsPattern to automatically
// insert {{STATIC_URL}} when inserting js files
'bower-install': {
app: {
html: 'app/index.html',
jsPattern: '<script type="text/javascript" src="{{STATIC_URL}}{{filePath}}"></script>'
}
}
});