How to include Javascript libraries in a Grunt project?

Question

I'm trying to learn a modern Javascript workflow for client-side development, so I'm giving a try to Grunt.

I want to require some libraries like AngularJS, Bootstrap or moment.js and have them installed in my dist directory. If possible I would like to have some package management for them.

I've given a look at Bower and grunt-bower-task, but I'm not sure up to which point they are suitable for this task, as not all packages include minified versions and grunt-bower-task seems to ignore those anyway.

Is there a Grunt-friendly package management solution to manage client-side Javascript libraries or should I keep downloading them to a vendor folder and just tell Grunt to copy them to the dist folder in their .js or .min.js variant?

Answer 1

I think bower and grunt have different responsabilities. Bower for client package management and grunt for building (and other tasks). At least I use them for that. Installing angularjs and bootstrap with bower, it downloads both minified and development libraries. If not you can always minified them with grunt.

And yes, i believe that controlling your packages with bower and building your application with grunt (using copy, concat, uglify, etc. tasks) is the best practice.

You can check Component also, its an equivalent for bower.

Answer 2

I tried to hack something like this up once using grunt-curl - just defining a list of libraries I wanted to include, and downloading them from cdnjs.com, which I believe keeps the links updated to current versions. I did this within a separate install task.

It wasn't the most elegant solution, but it did what I needed at the time. I probably wouldn't suggest it if you're wanting stronger control of the packages (ie. versions) you use - but then again if you do, why not just use Bower?