usemin and useminPrepare multiple targets

[freeman42x]

StackOverflow reference: http://stackoverflow.com/q/20517827/750216

From the usemin issues it appears that usemin and useminPrepare support multiple targets in the latest version:

useminPrepare support:

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

usemin support:

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

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.

Using grunt-usemin 2.0.2

foo/index.html and bar/index.html being the main pages for 2 single page applications.

Thanks for your help!

[keatz55]

@kelp404 Did you find a solution?

[blacksheepmails]

@Maksim-Bartoshyk Thanks! ^.^

[fawadniazi]

+1

[bampnet]

Hei guys, after 3 hours on tests, I've found this solution.

  grunt.initConfig({
    useminPrepare: {
        options: {
            dest: 'dist/app1'
        },
        html: ['app/app1/{,*/}*.html']
    },
    useminPrepareSecondTarget: {
        options: {
            dest: 'dist/app2'
        },
        html: ['app/app2/{,*/}*.html']
    },

    usemin: {
        options: {
            assetsDirs: [
                '<%= config.dist %>/app1',
                '<%= config.dist %>/app1/images',
                '<%= config.dist %>/app1/styles'
            ]
        },
        html: ['<%= config.dist %>/app1/{,*/}*.html'],
        css: ['<%= config.dist %>/app1/styles/{,*/}*.css']
    },
    useminSecondTarget: {
        options: {
            assetsDirs: [
                '<%= config.dist %>/app2',
                '<%= config.dist %>/app2/images',
                '<%= config.dist %>/app2/styles'
            ]
        },
        html: ['<%= config.dist %>/app2/{,*/}*.html'],
        css: ['<%= config.dist %>/app2/styles/{,*/}*.css']
    },

  });

  grunt.registerTask('useminPrepareSecondTarget', function () {
    var useminPrepareSecondTargetConfig = grunt.config('useminPrepareSecondTarget');
    grunt.config.set('useminPrepare', useminPrepareSecondTargetConfig);
    grunt.task.run('useminPrepare');
  });

  grunt.registerTask('useminSecondTarget', function () {
    var useminSecondTargetConfig = grunt.config('useminSecondTarget');
    grunt.config.set('usemin', useminSecondTargetConfig);
    grunt.task.run('usemin');
  });

  grunt.registerTask('build', [
   '...',
    'useminPrepare',
    'useminPrepareSecondTarget',
    '...',
    'usemin',
    'useminSecondTarget',
    '...'
  ]);