从usemin issues开始，usemin和useminPrepare似乎支持最新版本中的多个目标：
支持useminPrepare中的多个目标：
usemin支持：
我尝试过使用以下配置的多个目标：
useminPrepare: {
foo: {
dest: 'fooDist',
src: ['foo/index.html']
},
bar: {
dest: 'barDist',
src: ['bar/index.html']
}
},
usemin: {
foo: {
options: {
assetsDirs : ['fooDist']
},
html: ['fooDist/**/*.html'],
css: ['fooDist/styles/**/*.css']
},
bar: {
options: {
assetsDirs : ['barDist']
},
html: ['barDist/**/*.html'],
css: ['barDist/styles/**/*.css']
}
},
但是我收到以下错误：
运行“usemin：foo”（usemin）任务警告：不支持的模式：foo
使用--force继续。
使用grunt-usemin 2.0.2
foo/index.html和bar/index.html是2个单页应用程序的主要页面。
感谢您的帮助！
答案 0 :(得分：5)
默认情况下，usemin尝试从目标名称中检测解析器类型（html，css）。当您使用目标时，它的名称不是有效的解析器类型，您应该使用type选项手动指定解析器类型。这将导致每个dest的两个目标，一个用于html，一个用于css。
usemin:{
'foo-html':
{
options:
{
assetsDirs : ['fooDist'],
type:'html'
},
files: {src: ['fooDist/**/*.html']}
},
'foo-css':
{
options:
{
assetsDirs : ['fooDist'],
type:'css'
},
files: {src: ['fooDist/styles/**/*.css']}
},
'bar-html':
{
options:
{
assetsDirs : ['barDist'],
type:'html'
},
files: {src: ['barDist/**/*.html']}
},
'bar-css':
{
options:
{
assetsDirs : ['barDist'],
type:'css'
},
files: {src: ['barDist/styles/**/*.css']}
}
}
答案 1 :(得分：0)
您是否需要两个项目都位于同一个存储库和相同的Gruntfile下？
你说自己是“2页单页应用程序的主要页面”。如果你有能力把它分成两个不同的项目，你可能会省去一些痛苦。
或者，您可以将两个索引分组到公共目录下。这就是我如何使用grunt-usemin和两个不同的索引文件：
useminPrepare:
html: ['build/<%= relativePath %>/index.html', 'build/<%= relativePath %>/orderPlaced/index.html']
options:
dest: 'build/'
root: 'build/'
usemin:
html: ['build/<%= relativePath %>/index.html', 'build/<%= relativePath %>/orderPlaced/index.html']
答案 2 :(得分：0)
不确定这是否会有所帮助，但我能够通过Grunt-Contrib-Min和Grunt-Contr的组合成功完成您的尝试
'use strict';
module.exports = function(grunt) {
// Project Configuration
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
copy: {
main: {
options: {
encoding: 'UTF-16'
},
files:[
{
expand: 'true',
flatten: 'true',
src: 'src/audio/*',
dest: 'bin/pro/audio/'
},
{
expand: 'true',
flatten: 'true',
src: 'src/fonts/*',
dest: 'bin/pro/fonts/'
},
{
expand: 'true',
flatten: 'true',
src: 'src/adaptors/*.html',
dest: 'bin/pro/adaptors/'
},
{
expand: 'true',
flatten: 'true',
src: 'src/lib/*',
dest: 'bin/pro/lib/'
},
{
expand: 'true',
flatten: 'true',
src: 'src/img/*',
dest: 'bin/pro/img/'
},
{
expand: 'true',
flatten: 'true',
src: 'src/manifest.json',
dest: 'bin/pro/'
},
{
expand: 'true',
flatten: 'true',
src: 'src/audio/*',
dest: 'bin/lite/audio/'
},
{
expand: 'true',
flatten: 'true',
src: 'src/fonts/*',
dest: 'bin/lite/fonts/'
},
{
expand: 'true',
flatten: 'true',
src: 'src/adaptors/*.html',
dest: 'bin/lite/adaptors/'
},
{
expand: 'true',
flatten: 'true',
src: 'src/lib/*',
dest: 'bin/lite/lib/'
},
{
expand: 'true',
flatten: 'true',
src: 'src/img-lite/*',
dest: 'bin/lite/img/'
},
{
expand: 'true',
flatten: 'true',
src: 'src/lite/manifest.json',
dest: 'bin/lite/'
}
]
},
},
uglify: {
all: {
files: {
'bin/pro/js/cupid.min.js': ['src/popup.js','src/cupid.js','src/adaptors/*.js'],
'bin/pro/background.js': ['src/background.js'],
'bin/lite/js/cupid.min.js': ['src/popup.js','src/cupid.js','src/adaptors/*.js'],
'bin/lite/background.js': ['src/background.js'],
'bin/lite/lite.js': ['src/lite.js'],
'bin/pro/pro.js': ['src/pro.js'],
},
options: {
compress: false,
mangle:false
}
}
},
targethtml: {
dist: {
files: {
'bin/pro/popup.html': 'src/popup.html'
}
},
lite: {
files: {
'bin/lite/popup.html': 'src/popup.html'
}
},
},
cssmin: {
all: {
files: {
'bin/pro/cupid.min.css': ['src/*.css'],
'bin/lite/cupid.min.css': ['src/*.css'],
},
options: {
compress: true,
mangle:true
}
}
},
});
//Default task(s).
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-targethtml');
grunt.registerTask('default', ['uglify','cssmin','copy','targethtml']);
};
这个Grunt文件将占用我的App目录，将其全部输出到PRO文件夹中并添加一些特殊标签，并将所有AGAIN输出到Lite文件夹，并设置其他开关。
答案 3 :(得分：0)
虽然目前在usemin中不支持多个目标，但它们允许您定义新模式...
因此，在此期间，您可以使用以下内容定义新目标：
usemin: {
html: ['index.html'],
css: ['styles/{,*/}*.css'],
options: {
assetsDirs: ['src'],
patterns: {
templates: [[ /<img[^\>]+src=['"]([^"']+)["']/gm,
'Update the templates with the new img filenames'
]]
}
},
templates: "scripts/**/*.tpl.html"
}
答案 4 :(得分：0)
作为一种解决方法（在这一段时间内遇到困难），我们决定两次运行整个grunt作业，并添加了一个grunt选项，将目标文件切换为不同的值。不优雅，但很简单。
答案 5 :(得分：0)
我试图做类似的事情，我有多个页面/模板与不同的依赖css / js / img文件，我想通过usemin单独处理。您可以使用单个Gruntfile.js并使用多任务来使用usemin完成多个目标和目标。这将是你的gruntfile：
var packageConfig = [];
var gruntConfig = {};
gruntConfig.useminPrepareMulti = {};
gruntConfig.useminPrepare = {};
gruntConfig.usemin = {
html: [],
css: [],
options: {
assetDirs: []
}
};
var projectDirs = ['foo', 'bar'];
var src, dist;
projectDirs.forEach(function(dir) {
src = path1 + dir;
dist= path2 + dir;
gruntConfig.useminPrepareMulti[dir] = {
html: src + '*.html',
options: {
dest: dist,
staging: '.tmp' + dir,
flow: { html: { steps : { js : ['concat'] } } },
post: {}
}
};
packageConfig.push(src);
gruntConfig.usemin.html.push(dist + '*.html');
gruntConfig.usemin.css.push(dist + '/styles/*.css');
gruntConfig.usemin.options.assetsDirs.push( dist, dist + '/styles');
});
grunt.initConfig(gruntConfig);
grunt.registerMultiTask('useminPrepareMulti', 'multi-target-usemin', function() {
grunt.config.set('useminPrepare', this.data);
grunt.task.run('useminPrepare');
});
注册任务后，您可以使用以下命令运行所有不同的目标/目标配置：
grunt.registerTask('default', ['useminPrepareMulti']);
或者从您创建的packageConfig中单独运行它们：
grunt.registerTask('single', ['useminPrepareMulti:' + packageConfig[0]]);
我还必须修改html代码中的usemin块以包含相对于根的路径，例如：
<!-- build:js(./assets/dir/foo) scripts/vendor.js -->
<script src="scripts/file.js"></script>
<!-- endbuild -->