Grunt usemin和useminPrepare多个目标

Question

从usemin问题似乎usemin并useminPrepare支持最新版本的多个目标:

在useminPrepare中支持多个目标:

• 拉#162

• 拉#206

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个单页面应用程序的主要页面.

谢谢你的帮助!

Answer 1

默认情况下,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']}
    }
}

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

Answer 2

您是否需要两个项目都位于同一个存储库和同一个 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']