concat option with grunt-usemin v2.0

[L42y]

In grunt-usemin v2.0 branch: https://github.com/yeoman/grunt-usemin/tree/v2.0, the concat target is now unified to a single one called generated:

concat:
  { generated: 
   { files: 
      [ { dest: '.tmp/concat/styles/main.css',
          src: 
           [ 'app/components/normalize-css/normalize.css',
             '.tmp/styles/main.css' ] },
        { dest: '.tmp/concat/scripts/app.js',
          src: 
           [ 'app/scripts/app.js',
             'app/scripts/config/config.js' ] } ] } }

this makes both main.css and app.js in the example above contain the template script's content, is there a way to get around this problem?

[ericclemmons]

You should be able to use the grunt-usemin example and just specify:

options: { concat: 'generated' }

If you continue to have issues, I can make a specific test for it.

[L42y]

@ericclemmons the issue is if i specify like that, the generated templates script file will append to every concatenated files(in my example, main.css and app.js)

[ericclemmons]

Oh, of course! I'm such a dummy.

Sounds like I'll have to create a test case to support the new version.

I have an angular talk coming up this Saturday, so this will have to wait until that's done.

[L42y]

wow, AngularJS talk, super cool! thanks for your work.

[L42y]

seems grunt-usemin just bump to 2.0 https://github.com/yeoman/grunt-usemin

[ericclemmons]

Man, this is tricky!

The thing is, if you do multiple <!-- build/js --> tags with usemin, how do I know which one to append to?

Do you think the best way is to simply grab the generated config, and append the templates to the last files array that has .js files in it?

That would basically ensure that the templates are the last Javascript ran on the page.

[L42y]

Maybe I should open an issue for grunt-usemin, the new version break the compatibility with old version.

[ericclemmons]

It seems 2.0 isn't ready for public release yet (doesn't seem to be on master).

Have you tried out [grunt-processhtml][https://github.com/dciccale/grunt-processhtml]? It looks very similar.

https://twitter.com/tdecs/status/390973652801302529

[L42y]

Great alternative, but seems it lacks features such as integration with grunt-filerev.

btw grunt-usemin 2.0 actually published to npm: https://npmjs.org/package/grunt-usemin.

[ericclemmons]

Well crap. You're right. It is published. I guess all of my projects are that far out of date.

I think my last suggestion may work, but I don't know yet if this will be BC compatible or not...

[kylecordes]

I'm looking for a workaround for this issue also.

This would be a good real solution, I think: provide a way to specify more completely where inside the concat configuration the template file should be added. In the example above, the "path" consists of 3 pieces of information:

"concat"
"generated"
'.tmp/concat/scripts/app.js'

A means could be provided here, to point to that.

Alternatively, provide a function hook, so that users (like me) could write a line or two of code to stick the result at the right place.

[mstelten]

I found a workaround. You can specify a separate concat task. For example, mine is:

concat: {
            addTemplate: {
                src: [ '.tmp/concat/js/app.full.min.js', '.tmp/templates.js' ],
                dest: '.tmp/concat/js/app.full.min.js'
            }
        },

Then you can first run concat:generated then concat:addTemplate

[ericclemmons]

Heads up, I'm going to have to bump the minor version for grunt-angular-templates for this PR, so I'm wrapping up the other PRs before I do so!

[ericclemmons]

@kylecordes I do like the idea of a function hook. The latest rewrite has that supported most of the places, so that's an easy addition as well.

[pheuter]

@ericclemmons Any progress on this? Running into similar issues with my current setup using grunt-usemin and grunt-angular-templates.

[drewhamlett]

Having this issue too. Thanks!

[ericclemmons]

Here you are commenting on Github when there's perfectly good turkey to be gorging on! :)

I'll be wrapping up all of my open source projects this holiday. Apparently things keep moving even when I'm not ;)

[ericclemmons]

Working on this now, actually. I don't have any tests using grunt-usemin, so this will warrant that obviously...

[ericclemmons]

Wow, grunt really makes doing this a pain in the neck! Pretty lousy architecture.

While I'm figuring this out, instead of specifying a concat target, simply referencing the output templates.js in your <!-- build:js --> target work work as well, correct? Or is the gist being able to not reference that file so templates are lazy-loaded outside of production?

[ericclemmons]

Holy crap, I think I got it. Will be a BC change, though...

[ericclemmons]

Just released v0.5.0 that should work with grunt-contrib (based on my testing)!

[marcalj]

I'm getting always >> Concat target not found: scripts/scripts.js

        <!-- build:js scripts/modules.js -->
        <script src="bower_components/jquery/jquery.js"></script>
        <script src="bower_components/angular/angular.js"></script>
        <script src="bower_components/angular-route/angular-route.js"></script>
        ...
        <!-- endbuild -->

        <!-- build:js({.tmp,app}) scripts/scripts.js -->
        <script src="scripts/app.js"></script>
        ...
        <!-- endbuild -->

Gruntfile.js -> https://gist.github.com/marcalj/7747048

I'm using Yeoman. Thanks!

PD: Would be great to show a complete yeoman example in the documentation. It's not always trivial.

[ericclemmons]

@marcalj Can you paste up your ngtemplates config? This is what I'm testing with:

https://github.com/ericclemmons/grunt-angular-templates/blob/master/Gruntfile.js#L92-L98

[ericclemmons]

@marcalj As I mentioned in the other thread, the concat target should be generated. Right? Otherwise, maybe it'd be best for me to introduce something more like:

ngtemplates: {
  app: {
    options: {
      usemin: 'script/scripts.js'
    },
    ...
  }
}

This way, the script is added only to the usemin concat task building script/scripts.js. Thoughts?

[pheuter]

@ericclemmons In my case, I am generating two javascript files, vendor.js and application.js. When concatenating ng-templates, I need to append solely to application.js. The error I was running into was due to the templates file being concatenated to both files and that caused errors.

// build:js(.) javascripts/vendor.js

// build:js(.) javascripts/application.js

[ericclemmons]

Ah, that's the example I needed. Thanks, I'll fix this bad boy. I hope no-one minds me making a small BC break here ;)

[marcalj]

Yep, now I'm using:

    ngtemplates:  {
      dist: {
        cwd: '<%= yeoman.app %>',
        src: 'views/**.html',
        dest: '<%= yeoman.dist %>/scripts/templates.js',
        options: {
          module: 'app', // Can replace ngtemplates.dist with ngtemplates.app
          concat: 'generated',
//          htmlmin:  { collapseWhitespace: true, collapseBooleanAttributes: true },
          htmlmin: {}
        }
      }
    },

And, I have to put ngtemplates just after useminPrepare to make it work correctly.

  grunt.registerTask('build', [
    'clean:dist',
    'useminPrepare',
    'ngtemplates',
    'concurrent:dist',
    'autoprefixer',
    'concat',
    'ngmin',
    'copy:dist',
    'cdnify',
    'cssmin',
    'uglify',
    'rev',
    'usemin'
  ]);

Like @pheuter It's concatenating to both files generated by usemin (scripts/modules.js and scripts/scripts.js in my case).

Also there's another bug, rev doesn't replace filenames inside templates, but this is not your fault.

Your proposed solution looks great to me:

options: {
      usemin: 'script/scripts.js'
    },

[ericclemmons]

Great! So, #63 should resolve this, and I think I can may revert some of the behavior in 0.5.0 so that this improvement can go on on the 0.4.x branch as well.

[marcalj]

Great! Thanks Eric :)

[ericclemmons]

Just released v0.4.10 & v0.5.1 to be effectively the same thing, which adds a usemin option. Check out the updated README & release!