javascript - grunt usemin 和 usemin 准备多个目标

Question

来自 usemin issues看来 usemin 和 useminPrepare 在最新版本中支持多个目标:

在useminPrepare中支持多个目标:

• pull#162

• pull#206

用户支持:

• Multiple targets

我已经尝试使用具有以下配置的多个目标:

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']
    }
},

但我收到以下错误:

Running "usemin:foo" (usemin) task Warning: Unsupported pattern: foo

Use --force to continue.

使用 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