Using grunt to concatenate all vendor javascript files?

Question

I'm using Yeoman (v1.x) with grunt (v0.4.2) to build an Angular project. The build task concatenates all my app/script JS files, but it leaves all of my dependency files unconcatenated, so that my built index.html makes these calls:

<script src="components/angular-unstable/angular.js"></script>
<script src="components/jquery/jquery.js"></script>
<script src="components/angular-resource/angular-resource.js"></script>
<script src="components/bootstrap/js/bootstrap-dropdown.js"></script>
<script src="components/moment/moment.js"></script>
<script src="components/underscore/underscore.js"></script>

<!-- xxxxxbuild:js scripts/scripts.js -->
<script src="scripts/274baf7d.scripts.js"></script>

I would like all of the components my project uses, i.e. angular.js, jquery.js, and so forth, to be in scripts.js. Is it easy to reconfigure the GruntFile to do so? Or is this not done by default for a practical reason?

Solution

Yes, this is easy to configure. Just add the vendors scripts in the sources you pass the grunt concat task.

// Project configuration.
grunt.initConfig({
  concat: {
    dist: {
      src: ['vendors/**/*.js', 'scripts/**/*.js'],
      dest: 'built.js'
    }
  }
});

Comments

[Jonah]

I'm curious: I know browserify does concatenation based on require statments. Is this an overlap of functionality with grunt, or are there different use-cases?

[Simon Boudrias]

Well, Grunt is simply a task runner. It has no understanding whatsoever of concatenation or browserify. The concatenation task is a Grunt plugin. A Grunt plugin is simply a registered task you can call from your command line. So, with Browserify, you'd simply use the browserify grunt plugin and add it to your workflow - and then you won't need any concatenation task. For my part, I never use concat task as I use RequireJs and it handle concatenation itself via his Grunt plugin.

[Jonah]

Thanks for the explanation

[truongnguyen1912]

In case that there are some dependencies in the vendor (for example, BackboneJS depends on Underscore), how can I concat all of them without specifying concat order manually?

[Simon Boudrias]

@truongnguyen1912 use a dependency/module system. Webpack, Browserify, Require.js, etc etc