Insert differing javascript dependencies into index via grunt?

Question

In my gruntfile I've defined an array of javascript files I need to insert into the index, they include dependencies (jquery and etc) plus the files that make up my angular app (controllers, services, etc).

This array I use in a task which combines them and minifies them so that I have one single final js file, which is good for production but for dev work I'd prefer the files to be inserted individually for easier debugging.

Is there a grunt plugin which would allow me to:

insert each script from the array separately into the index
insert the minified script into the index
easily switch between the two, such that I don't need to go in and manually delete each script and then add the minified script, thus I could insert the full scripts in the task that builds for dev and insert the concatenated scripts in the build for prod task.

I've found a few plugins (fileblocks and injector) which would seem to do what I want but I couldn't get them to work so if you could also provide an example of how to configure the plugin for the build dev and build prod tasks.

George Bora George Bora · Accepted Answer · 2015-10-25T08:50:38

I finally found a grunt plugin which does what I want grunt-file-blocks, while initially it didn't seem to work for me I had misread the documentation and the author was so kind as to help me.

Basically what I did was mark in my index.html where I wanted to insert the js depencies like so

<!-- fileblock:js blockName1 -->
<!-- endfileblock -->

<!-- fileblock:js blockName2 -->
<!-- endfileblock -->

And then in my Gruntfile.js I set up the task:

fileblocks: {
  dev: {
    files: [{
      src: 'index.html',
      options: {removeFiles: true},
      blocks: {
        'blockName1': { src: arrayOfDevDepenices },
        'blockName2': { src: arrayOfDevDepenices }
      }
    }]
  },

dist: {
    files: [{
      src: 'index.html',
      options: {removeFiles: true},
      blocks: {
        'blockName1': { src: arrayOfDistDepenices },
        'blockName2': { src: arrayOfDistDepenices }
      }
    }]
  }
}

And now with a simple grunt fileblocks:dev I can set up my depencies in the index for dev work, while with grunt fileblocks:dist I prepare the index for going into production.

Insert differing javascript dependencies into index via grunt?

1 Answers