How to include scripts automatically in a yeoman/grunt project?

Question

I have a working yeoman project. I am using grunt-usemin.

To include javascripts, I do this in index.html:

<!-- build:js scripts/includes.js --> <script src="/bower_components/jquery/jquery.min.js"></script> <script src="/bower_components/underscore/underscore-min.js"></script> <script src="/bower_components/angular/angular.js"></script> <script src="/bower_components/angular-route/angular-route.min.js"></script> <script src="/bower_components/angular-resource/angular-resource.min.js"></script> <script src="/bower_components/angular-sanitize/angular-sanitize.min.js"></script> <script src="/bower_components/angular-ui-date/src/date.js"></script> <script src="/bower_components/angulartics/src/angulartics.js"></script> <script src="/bower_components/angulartics/src/angulartics-ga.js"></script> <script src="/bower_components/jquery-ui/ui/jquery-ui.js"></script> <script src="/assets/vendor/bootstrap.2.3.1.min.js"></script> ... a few more libs like that  <script src="/scripts/config.processed.js"></script> <script src="/scripts/app.js"></script>  <script src="/scripts/controllers/first_controller.js"></script> <script src="/scripts/controllers/second_controller.js"></script> <script src="/scripts/controllers/third_controller.js"></script> <script src="/scripts/controllers/fourth_controller.js"></script> <script src="/scripts/controllers/fith_controller.js"></script> <script src="/scripts/controllers/sixth_controller.js"></script> <script src="/scripts/controllers/seventh_controller.js"></script> ... 20 more like that  <script src="/scripts/directives/first_directive.js"></script> <script src="/scripts/directives/second_directive.js"></script> <script src="/scripts/directives/third_directive.js"></script> ... 10 more like that  <script src="/scripts/services/first_service.js"></script> <script src="/scripts/services/second_service.js"></script> ...  <script src="/scripts/filters/first_filter.js"></script> <script src="/scripts/filters/second_filter.js"></script> ... <!-- endbuild --> 

This is verbose. I would like to be able to do something like this:

In index.html:

<!-- build:js scripts/includes.js -->  <!-- library includes as before --> <script src="/bower_components/jquery/jquery.min.js"></script>  <script src="/bower_components/underscore/underscore-min.js"></script> ...  <!-- Replace application includes with this: --> <script src="<% '/scripts/**/*.js' %>"></script>  <!-- endbuild --> 

Answer 1

I used grunt-include-source

Install it:

npm install grunt-include-source --save-dev 

In Gruntfile:

Load it before initConfig:

module.exports = function (grunt) {   ...   grunt.loadNpmTasks('grunt-include-source'); 

Configure includeSource itself in initConfig:

grunt.initConfig({   ...,   includeSource: {       options: {         basePath: 'app',         baseUrl: '/',       },       server: {         files: {           '.tmp/index.html': '<%= yeoman.app %>/index.html'         }       },       dist: {         files: {           '<%= yeoman.dist %>/index.html': '<%= yeoman.app %>/index.html'         }       }     } 

Add this task where you want (here, I add it to the build task):

grunt.registerTask('build', [     'clean:dist',     'includeSource:dist',     'useminPrepare',     ... 

Add it to the watch task:

watch: {   ...,   includeSource: {     files: ['<%= yeoman.app %>/index.html'],     tasks: ['includeSource:server']   } 

Change useminPrepare (if you use yeoman)

useminPrepare: {   // changed from app to dist, to take index.html processed by includeSource in dist   html: '<%= yeoman.dist %>/index.html',   options: {     dest: '<%= yeoman.dist %>'   } }, 

I've used to subtasks: dist and server to generate the index.html in different directories.

---

Edit: How to include your javascripts in index.html:

<!-- build:js({.tmp,dist,app}) /scripts/application.js --> <!-- vendor, external --> <script src="/bower_components/jquery/jquery.min.js"></script> <script src="/bower_components/underscore/underscore-min.js"></script> <script src="/assets/vendor/underscore.extentions.js"></script> <script src="/bower_components/angular/angular.js"></script> <script src="/bower_components/select2/select2.js"></script> <script src="/bower_components/angular-ui-select2/src/select2.js"></script>  <!-- entry point --> <script src="/scripts/config.processed.js"></script> <script src="/scripts/app.js"></script>  <!--include everything in scripts/ except files directly inside scripts (without subdirectory) --> <!-- include: "type": "js", "files": ["scripts/**/*.js", "!scripts/*.js"] -->  <!-- endbuild --> 

If you want to include everything scripts, do this:

<!-- include: "type": "js", "files": "scripts/**/*.js" -->