grunt auto insert your javascript files

Question

I am just getting to grips with usemin and wiredep. I have this in my index.html file:

<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<!-- endbower -->
<!-- build:css(.tmp) styles/core.css -->
<link rel="stylesheet" href="styles/core.css">
<!-- endbuild -->

If I run grunt build, the index.html is modified to this:

<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/angular-loading-bar/build/loading-bar.css" />
<link rel="stylesheet" href="bower_components/angular-ui-select/dist/select.css" />
<link rel="stylesheet" href="bower_components/ng-notify/src/styles/ng-notify.css" />
<link rel="stylesheet" href="bower_components/components-font-awesome/css/font-awesome.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/core.css -->
<link rel="stylesheet" href="styles/core.css">
<!-- endbuild -->

This is great, but it only happens for the bower:css files (which I believe is done with wiredep. Further down my page I have similar to JavaScript files and that works also. I would like to do it for my own JavaScript files. Currently I have about 100 and i have manually put the into my src/index.html. When my application is built, usemin replaces my scripts with the concatinated, uglified version which is great. But when I build, I would like the src/index.html to get all the scripts from by src/app directory and inject them into my html file.

Can this be done?

Answer 1

I managed to figure this out using grunt-injector. I configured my Gruntfile to use grunt-injector like this:

// Automatically inject my components into index.html
injector: {
  options: {
    template: '<%= yeoman.app %>/index.html'
  },
  html: {
    options: {
      transform: function (filePath) {
          return '<script type="text/ng-template" src="' + filePath.replace('/src/', '') + '"></script>';
      }
    },
    files: {
      '<%= yeoman.app %>/index.html': [
        '<%= yeoman.app %>/app/**/*.html'
      ]
    }
  },
  scripts: {
    options: {
      transform: function (filePath) {
          return '<script src="' + filePath.replace('/src/', '') + '"></script>';
      }
    },
    files: {
      '<%= yeoman.app %>/index.html': [
        '<%= yeoman.app %>/app/**/*.module.js',
        '<%= yeoman.app %>/app/**/*.js'
      ]
    }
  },
  styles: {
    options: {
      transform: function (filePath) {
          var media = filePath.indexOf('print') > -1 ? 'print' : 'screen';
          return '<link rel="stylesheet" media="' + media + '" href="' + filePath.replace('/.tmp/', '') + '" />';
      }
    },
    files: {
      '<%= yeoman.app %>/index.html': [
        '.tmp/styles/**/*.css'
      ]
    }
  }
},

And then in my index.html, I just put the injector comments like this:

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

Which were converted to this:

  <!-- injector:css -->
  <link rel="stylesheet" media="screen" href="styles/core.css" />
  <link rel="stylesheet" media="print" href="styles/print.css" />
  <!-- endinjector -->

And that was it.