Custom targets with corresponding injector tag

[akempes]

As mentioned in #20 it might be a good idea to group files by the target name instead of the file extension.

This allows you to make multiple 'groups' of injected files.

Gruntfile

injector: {
  myControllers: {
    files: {
      '<%= yeoman.app %>/index.html': ['<%= yeoman.app %>/scripts/controllers/**/*.js']
    }
  },
  myServices: {
    files: {
      '<%= yeoman.app %>/index.html': ['<%= yeoman.app %>/scripts/services/**/*.js']
    }
  }
}

HTML

<!-- injector:myControllers -->
<!-- endinjector -->

<!-- injector:myServices -->
<!-- endinjector -->

If you want, it's also possible to inject multiple file types in a single group..

[joakimbeng]

Good idea! I would prefer if this is an option, it will break a lot of peoples configurations otherwise.

Maybe like so:

injector: {
  options: {
    groupByTarget: true
  },
  myControllers: {
    files: {
      '<%= yeoman.app %>/index.html': ['<%= yeoman.app %>/scripts/controllers/**/*.js']
    }
  },
  myServices: {
    files: {
      '<%= yeoman.app %>/index.html': ['<%= yeoman.app %>/scripts/services/**/*.js']
    }
  }
}

And if the groupByTarget (maybe a better name) is not "truthy" it fallbacks to the current behaviour. What do you think?

[akempes]

I agree, this feature is now configurable.

[joakimbeng]

Please update the README and add some tests.

[akempes]

I added some tests and updated the readme file. Please check if my spelling is correct, English is not my native language :)

[brunowego]

+1

[jt000]

Isn't this already possible using the starttag option? I think the only issue is that the output file gets clobbered by other targets.

      injector: {
            options: {
                template: 'assets/html/index.html',
                lineEnding: '\r\n',
                relative: true
            },

            vendorCSS: {
                options: {
                    starttag: '<!-- injector:vendor:{{ext}} -->'
                },
                files: {
                    '<%= config.outDirectory %>/index.html': ['<%= config.tmpDirectory %>/css/vendor/*.css'],
                }
            },

            appCSS: {
                options: {
                    starttag: '<!-- injector:app:{{ext}} -->'
                },
                files: {
                    '<%= config.outDirectory %>/index.html': ['<%= config.tmpDirectory %>/css/app/*.css'],
                }
            }
        },

The above should allow you to do something like:

        <!-- injector:vendor:css -->
        <!-- endinjector -->

        <!-- injector:app:css -->
        <!-- endinjector -->

However, there seems to be an issue with multiple targets directing to the same file where it clobbers previous changes (in the above example only injector:app:css gets injected when running grunt injector). IMO, this seems like a bug rather than requiring a new feature added...

...or it is entirely possible I'm mis-understanding the scenario.

[jt000]

Ignore my stupidity w/ the previous comment... 😄 In my case it is re-fetching the template for each target & clobbering the previous target's output. This is likely by design since it is possible one might want to use the same template to inject different data to different files. I wouldn't expect injector to know to pipe the output from one target to the next.

That said, I was able to resolve the issue by piping the output to a temp file & using that as the template for the next target

 injector: {
            options: {
                lineEnding: '\r\n',
                relative: true
            },

            vendorCSS: {
                options: {
                    template: 'assets/html/index.html',
                    starttag: '<!-- injector:vendor:{{ext}} -->'
                },
                files: {
                    '<%= config.tempDirectory%>/index.html': ['<%= config.tmpDirectory %>/css/vendor/*.css'],
                }
            },

            appCSS: {
                options: {
                    template: '<%= config.tempDirectory%>/index.html',
                    starttag: '<!-- injector:app:{{ext}} -->'
                },
                files: {
                    '<%= config.outDirectory %>/index.html': ['<%= config.tmpDirectory %>/css/app/*.css'],
                }
            }
        },

[mindvox]

Hi All,
I like where this is headed, however I think an addition could be made for supporting template language comment targeting. For example, consider the following handlebars comments;

<html>
  <head>
    <title>{{title}}</title>
    {{! injector:css }}{{! endinjector }}
  </head>

  <body>
    {{{body}}}
    {{! injector:js }}{{! endinjector }}
  </body>
</html>

This would be awesome because those comments would be hidden when viewing the source code.

I hope this meets with more approval 😄

[p3x-robot]

ping, can i close it or you would want to merge this and is safe to merge?