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!

[hemanth]

Facing the same issue. But if you notice the PR for multiple target, it has target changes only for useminPrepare but not usemin

[iamsebastian]

Same here.

[stylenclass]

+1

[ariel1974]

+1

[lvl-svasseur]

As @sorich87 pointed in #206 , multiple targets are supported but NOT multiple destinations. It's another issue not fixed yet #157 .

[smbeiragh]

Separate each destination to a single target and not forget to use the type option. not a nice solution and too much configuration but it works!

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

thanks @michamil, for noticing error in selecting dest files. just fixed it.

[michamil]

@smbeiragh - thanks! it is great to have this working!!

I would note that, for me, it only works when I make 'files' an array of an array. Like this:

dist_foo: { options: { assetDirs: 'dist_foo', type: 'html' }, files: [['dist_foo/index.jsp', 'dist_foo/logout.html']] }, dist_bar: { options: { assetDirs: 'dist_bar', type: 'html' }, files: [['dist_bar/index.html', 'dist_bar/logout.html']] }

If I use the normal sytax of files: ['dist_foo/index.jsp', 'dist_foo/logout.html'], then I get the error "Warning: Cannot use 'in' operator to search for 'src' in dist_foo/index.jsp Use --force to continue." Double-bracketing seems to make that go away, and as far as I can tell it all is working well now. Your note is much appreciated.

[smbeiragh]

@michamil, your welcome. :) I wrote it last night too late at 3:00 am, and yes I made a mistake. I can confirm the same error. I should select files using src options.

files: {
    src: [
        'fooDist/**/*.html'
    ]
}

[cniaulin]

+1

[johnfmorton]

+1

[ee99ee]

+1

[hemanth]

:+1:

[WORMSS]

@hemanth with you closing this issue, does that mean its fixed? or you are accepting the hack above as 'the solution'?

[hemanth]

That does not seem like a hack.

[WORMSS]

I guess that means you think the Hack is 'the solution' then.. Even though the person who wrote it themselves say its not nice rather than have it fixed.

[hemanth]

@WORMSS Please feel free to reopen this issue, if you find a better solution.

[smbeiragh]

@WORMSS by default the usemin tries to detect the type option using target name. when we use a custom target name and not the 'HTML' or 'CSS' target names. we should set a value directly on the 'type' option. It seems this is by design and can't be considered as a hack. although any better solution would be welcome.

[Avien]

Hi, it still doesn't solve different steps which I need to configure for 2 different targets:

 useminPrepare: {      
      'dist': {
          src:['<%= yeoman.dist %>/{index,login,signup,change-password}.html'],
          options: {
              dest: '<%= yeoman.dist %>',
              flow: {
                  html: {
                      steps: {
                          js: ['concat', 'uglifyjs'],
                          css: ['cssmin']
                      },
                      post: {}
                  }
              }
          }
      },
      'integ':{
          src:['<%= yeoman.dist %>/{index,login,signup,change-password}.html'],
          options: {
              dest: '<%= yeoman.dist %>',
              flow: {
                  html: {
                      steps: {
                          js:['concat'],
                          css:['concat']
                      },
                      post: {}
                  }
              }
          }
      }

Unless I can define 'flow' attribute under 'options' in the usemin task?

[ee99ee]

@hemanth why was this closed? what's the solution?

[hemanth]

@ee99ee The solutuon but still many seems to be not convisied with it, so re-opened.

[nistormihai]

+1 I need two kinds of usemin for dist and dev.

[neg3ntropy]

The solution by @smbeiragh fails for js files since _defaultPatterns does not contain a "js" key. Would not hurt to add one with no patterns. I used JSON as a work around.

[kelp404]

How to add patterns for js?

# it is not work
usemin:
    options:
        # sample
        # https://github.com/yeoman/grunt-usemin/blob/master/lib/fileprocessor.js
        patterns:
            js: [
                [/(?:views\/([\/\w-]+\.html))/gm, 'Update the JavaScript to reference our revved templates']
            ]
    'admin-js':
        options:
            assetsDirs: [
                'adm/dist'
                'adm/dist/template_angular'
            ]
            type: 'js'
            patterns:
                js: [
                    [/(?:views\/([\/\w-]+\.html))/gm, 'Update the JavaScript to reference our revved templates']
                ]
        files:
            src: ['adm/dist/javascript/*.js']

[thecoleorton]

@Avien Did you ever figure out a solution to allow 2 different flow configurations for useminPrepare? Thanks in advance!

[Avien]

No, but I found a workaround , because useminPrepare does the copy of the concatenated files internally I explicitly created a task (called copy:dist-debug) to be executed before the usemin task:

 copy: {
       'dist-debug':{
                files: [{
                    expand: true,
                    dot: true,
                    cwd: '.tmp/concat/',
                    dest: '<%= yeoman.dist %>',
                    src: 'styles/**/*.css'
                },
                    {
                        expand: true,
                        cwd: '.tmp/concat/scripts/',
                        dest: '<%= yeoman.dist %>/scripts/',
                        src: '*.js'
                    }]
            }
 }

And then in the 'dist-debug' task:

.
.
.
.
'includeSource:dist',
'useminPrepare',
'concat:generated',
'copy:dist-debug',
'ngtemplates',
'filerev',
'usemin'

[thecoleorton]

@Avien What does your useminPrepare task look like?

[dudewad]

+1, I've been trying to fix this for hours. I'm about to just drop it all together.

[Avien]

My useminPrepare is very simple , did not make any significant changes to it

useminPrepare: {
            html: '<%= yeoman.dist %>/**/*.html',
            options: {
                dest: '<%= yeoman.dist %>'
            }
        }

[brunowego]

Thanks @Avien :+1:

[stephanebachelier]

To all, maybe I'm wrong, but it seems there are different problems in all the comments. The main issue is about multiple targets. Others problems are use cases like excluding usemin in differents targets.

There are current PR under review that will help tackling this issue. Stay tuned :)