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 :)

[xtianus79]

yea ran smack into this. I want to have multiple targets in one file... this is a major headache. how long will this take to fix and what is the best possible solution.

[djaax]

+1

[alessandrogurgel]

+1

[stephanebachelier]

To all there are some PR waiting that should partly resolved this issue. But two others PR should be merged before as we are moving from regexp to HTML parser.

So please stop adding +1 it won't help.

[dudewad]

I think the point of the +1 is to increase the urgency of the fix; if nobody +1'd it priority would drop. Why would you not want this feedback?

[xtianus79]

@dudewad +1

[stephanebachelier]

@dudewad IMO adding a message with only '+1' is kind of spam. The urgency of this fix is already known, as I've already said in a previous comment.

I've begin to merge majors PR in the dev branch. I've decided to merge them into a dev branch because the PR might break existing code / configuration. We need the dev branch to be tested in some yeoman generators or any user workflow, before merging into master.

The PR associated with this issue will be merged really soon.

[stephanebachelier]

@dudewad I'm currently working on the support for multiple target.

[Maksim-Bartoshyk]

As a temporary workaround for multiple flows (prod/dev) you could use the next solution: 1) define config for prod and dev like this

useminPrepare: {
            html: 'src/index.html',
            options: {
                dest: 'dist',
                flow: {
                    steps: {
                        'js': ['concat', 'uglifyjs'],
                        'css': ['concat', 'cssmin']
                    },
                    post: {}
                }
            }
        },
useminPrepareDev: {
            html: 'src/index.html',
            options: {
                dest: 'dist',
                flow: {
                    steps: {
                        'js': ['concat'],
                        'css': ['concat']
                    },
                    post: {}
                }
            }
        }

2) register simple task which will replace useminPrepare configuration with useminPrepareDev

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

3) use different flows for dev and prod in the next way:

// Default task (prod). Produces minified version
    grunt.registerTask('default', [
        .........
        'useminPrepare',
        'concat:generated',
        'cssmin:generated',
        'uglify:generated',
        'usemin',
       ...........
    ]);

    // dev task. The same as  prod but without minification.
    grunt.registerTask('dev', [
        ............
        'useminPrepareDev',
        'concat:generated',
        'usemin',
       ...............
    ]);

Hope this helps someone.

[dudewad]

Hacks aside, this is still a pretty high prio issue. I've already switched to something else. I say that because this ticket has been open for a year and a half and we were told to stop +1-ing it...

[JoseInTheArena]

@dudewad What did you switch to if I may ask?

[dudewad]

I ended up writing my own plugin and combing it with some other stuff. Not a great alternative but I was outta time.

[LeleDev]

+1 Please fix this issue

[ghost]

:+1:

[arthurvr]

As told earlier, please stop the +1s and the :+1:s.

[fferraris]

:+1:

[ghost]

:+1:

[yaojingguo]

:+1:

[GitRubb]

:+1:

[keatz55]

+1