Using Grunt And Bower for Frontend Package Management

http://realchaseadams.com/2013/11/10/grunt-build-and-bower-package-management/

by realchaseadams • 13 years ago

6 6 13 years ago

For the latest project at work I've been using Yeoman with Grunt, Bower and NPM for the Node part. It has been a fantastic experience and a brilliantly streamlined workflow. I would highly recommend it.

The yeoman-angular generator is great at setting up scaffolding and then grunt build spits out concatenated and minified js and CSS files. You can also run all your tests using Grunt (which also get setup by the yeoman generator).

realchaseadams3• 13 years ago

Yeoman is fantastic! I actually used it to scaffold out my blog, which I use jekyll for. It's amazing the things that we can automate things we used to have to manually do and focus on making cool stuff!

SkyMarshal2• 13 years ago

Fwiw an easy way to get started with Grunt & Bower is to clone Bootstrap [1] and follow the setup instructions in the readme. That'll get you up and running with a well-developed Gruntfile.js, Grunt, Bower, Less & JS compilation, testing, and a number of other things. Then you can customize from there with the huge package repository [2] - separate test and prod builds, htmlminification, etc.

[1] https://github.com/twbs/bootstrap

[2] http://gruntjs.com/plugins

realchaseadams3• 13 years ago

Have you used Yeoman? It may suit those purposes better, especially if your just using it for the gruntfile and bower configs.

One of the reasons I love Grunt is because of it's robust contribution packages, so that's a great point.

Here's my Gruntfile if you're interested:

https://gist.github.com/realchaseadams/7425232

SkyMarshal2• 13 years ago

Yup, Yeoman's great too, only reason I suggest starting with Bootstrap instead is b/c the first time you start playing with Yeoman you can spend a lot of time trying to figure out which scaffolding to download.

There are multiple options for every framework contributed by different people and if you're not familiar with any of them, it can take some time downloading them all, reading through the source, and comparing. At least that was the case for me.

Bootstrap cuts out that step and is a simple, 'don't make me think' way of cutting straight to working with Grunt and Bower.

Thanks for the gruntfile, lots of things and ways of doing stuff in there I haven't seen yet, starred and will refer to it as I continue developing my own.

Using Grunt And Bower for Frontend Package Management

Related Stories