Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

concat option with grunt-usemin v2.0 #44

Closed
L42y opened this issue Sep 25, 2013 · 30 comments
Closed

concat option with grunt-usemin v2.0 #44

L42y opened this issue Sep 25, 2013 · 30 comments

Comments

@L42y
Copy link

L42y commented Sep 25, 2013

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
Copy link
Owner

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
Copy link
Author

L42y commented Sep 26, 2013

@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
Copy link
Owner

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
Copy link
Author

L42y commented Sep 27, 2013

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

@L42y
Copy link
Author

L42y commented Oct 15, 2013

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

@ericclemmons
Copy link
Owner

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
Copy link
Author

L42y commented Oct 21, 2013

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

@ericclemmons
Copy link
Owner

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
Copy link
Author

L42y commented Oct 21, 2013

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
Copy link
Owner

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
Copy link

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
Copy link

mstelten commented Nov 2, 2013

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
Copy link
Owner

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
Copy link
Owner

@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
Copy link

pheuter commented Nov 27, 2013

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

@drewhamlett
Copy link

Having this issue too. Thanks!

@ericclemmons
Copy link
Owner

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
Copy link
Owner

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

@ericclemmons
Copy link
Owner

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
Copy link
Owner

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

@ericclemmons
Copy link
Owner

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

@marcalj
Copy link

marcalj commented Dec 2, 2013

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
Copy link
Owner

@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
Copy link
Owner

@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
Copy link

pheuter commented Dec 2, 2013

@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
Copy link
Owner

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
Copy link

marcalj commented Dec 2, 2013

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
Copy link
Owner

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
Copy link

marcalj commented Dec 2, 2013

Great! Thanks Eric :)

@ericclemmons
Copy link
Owner

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

7 participants