javascript Grunt usemin 和 usemin 准备多个目标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20517827/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Grunt usemin and useminPrepare multiple targets
提问by R?zvan Flavius Panda
From the usemin issuesit appears that useminand useminPreparesupport multiple targets in the latest version:
从usemin问题似乎usemin并useminPrepare支持最新版本的多个目标：
Support multiple targets in useminPrepare:
在 useminPrepare 中支持多个目标：
usemin support:
使用支持：
I've tried using multiple targets with the following configuration:
我尝试使用具有以下配置的多个目标：
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']
}
},
but I receive the following error:
但我收到以下错误：
Running "usemin:foo" (usemin) task Warning: Unsupported pattern: foo
Use --force to continue.
运行“usemin:foo”（usemin）任务警告：不支持的模式：foo
使用 --force 继续。
Using grunt-usemin 2.0.2
使用 grunt-usemin 2.0.2
foo/index.htmland bar/index.htmlbeing the main pages for 2 single page applications.
foo/index.html并且bar/index.html是 2 个单页应用程序的主要页面。
Thanks for your help!
谢谢你的帮助！
回答by smbeiragh
by default usemin tries to detect parser type (html,css) from the target name. when you are using a target that it's name is not a valid parser type you should use the type option to specify the parser type manually. this will result in two target for every dest, one for html and one for css.
默认情况下，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']}
}
}
回答by AlexMA
As a workaround (struggled with this for a while), we decided to run the entire grunt job twice and added a grunt option which toggled the target file to a different value. Not elegant, but simple.
作为一种解决方法（为此苦苦挣扎了一段时间），我们决定将整个 grunt 作业运行两次并添加一个 grunt 选项，将目标文件切换为不同的值。不优雅，但简单。
回答by tswei
I was attempting to do something similar where I had multiple pages/templates with different dependent css/js/img files which I wanted to separately process through usemin. You can use a single Gruntfile.js and use a multitask to accomplish multiple targets and destinations with usemin. This would be your gruntfile:
我试图做一些类似的事情，我有多个页面/模板具有不同的依赖 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');
});
With the tasks registered you can run all the different target/dest configurations with:
注册任务后，您可以使用以下命令运行所有不同的目标/目标配置：
grunt.registerTask('default', ['useminPrepareMulti']);
Or run them individually from the packageConfig you created:
或者从您创建的 packageConfig 单独运行它们：
grunt.registerTask('single', ['useminPrepareMulti:' + packageConfig[0]]);
I also had to modify the usemin blocks in the html code to include the path relative to the root, e.g. :
我还必须修改 html 代码中的 usemin 块以包含相对于根的路径，例如：
<!-- build:js(./assets/dir/foo) scripts/vendor.js -->
<script src="scripts/file.js"></script>
<!-- endbuild -->
回答by firstdoit
Do you need both projects to live under the same repository and the same Gruntfile?
您是否需要两个项目都位于同一个存储库和同一个 Gruntfile 下？
You said yourself they are "main pages for 2 single page applications". If you can afford to divide it into two different projects, you'll probably save yourself some pain.
您自己说它们是“2 个单页应用程序的主页”。如果您有能力将其分成两个不同的项目，您可能会为自己省去一些痛苦。
Alternatively, you can group both indexes under a common directory. This is how I use grunt-usemin with two different index files:
或者，您可以将两个索引分组到一个公共目录下。这就是我将 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']
回答by Code Whisperer
Not sure if this will help, but I was able to succeed at doing what you were trying with a combination of Grunt-Contrib-Min and Grunt-Contr
不确定这是否会有所帮助，但我能够成功地使用 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']);
};
This Grunt File will take my App directory, output it all into the PRO folder with some special tags added, and also output everything AGAIN to the Lite folder, with other switches set.
这个 Grunt 文件将获取我的 App 目录，将其全部输出到 PRO 文件夹中并添加一些特殊标签，并将所有内容再次输出到 Lite 文件夹，并设置其他开关。
回答by Shai Reznik - HiRez.io
Although multiple targets are not supported currently in usemin, they do allow you to define new patterns...
尽管 usemin 当前不支持多个目标，但它们确实允许您定义新模式...
So in the meantime you can define new targets using something like:
因此，与此同时，您可以使用以下内容定义新目标：
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"
}
