Grunt usemin和usemin准备多个目标

从usemin问题看来，usemin和useminPrepare支持最新版本中的多个目标：

useminPrepare支持：

• https://github.com/yeoman/grunt-usemin/pull/162

• https://github.com/yeoman/grunt-usemin/pull/206

usemin支持：

• https://github.com/yeoman/grunt-usemin/issues/57

我试过用以下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'] } }, 

但我收到以下错误：

运行“usemin：foo”（usemin）任务警告：不支持的模式：foo

使用–force继续。

使用grunt-usemin 2.0.2

foo/index.html和bar/index.html是2个单页面应用程序的主页面。

谢谢你的帮助！

Answer 1

默认情况下，usemin尝试从目标名称中检测parsing器types（html，css）。 当你使用的目标名称不是有效的parsing器types时，应该使用type选项手动指定parsing器types。 这将导致每个目标的两个目标，一个为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']} } } 

https://github.com/yeoman/grunt-usemin/issues/255

Answer 2

你是否需要两个项目在同一个存储库和相同的Gruntfile下？

你说自己是“单页面应用程序的主页面”。 如果你能把它分成两个不同的项目，你可能会省下一些痛苦。

或者，您可以将两个索引分组在一个公共目录下。 这是我如何使用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'] 

Answer 3

不知道这是否有帮助，但我能成功地做你正在尝试与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文件夹中，添加了一些特殊的标签，并且在设置了其他开关的情况下，也将所有的东西都输出到Lite文件夹中。

Answer 4

尽pipeusemin目前不支持多个目标，但它们允许您定义新的模式…

所以在此期间，你可以使用类似的东西来定义新的目标：

 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" } 

Answer 5

作为一个解决方法（在这一段时间里苦苦挣扎），我们决定运行整个grunt作业两次，并添加一个grunt选项，将目标文件切换到不同的值。 不优雅，但简单。

Answer 6

我试图做类似的地方，我有多个页面/模板与不同的依赖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'); }); 

通过注册的任务，您可以运行所有不同的目标/目标configuration：

 grunt.registerTask('default', ['useminPrepareMulti']); 

或者从您创build的packageConfig单独运行它们：

 grunt.registerTask('single', ['useminPrepareMulti:' + packageConfig[0]]); 

我还必须修改html代码中的usemin块来包含相对于根的path，例如：

 <!-- build:js(./assets/dir/foo) scripts/vendor.js --> <script src="scripts/file.js"></script> <!-- endbuild -->