The goal of automation is to make the annoying stuff I don’t want to have to remember to do easier to do. Bower is useful for updating things. Grunt is useful for running a series of commands. Using them together makes life easier.
In my little world, everything lives in a folder called ‘assets’ and its very simple.
Add a Package to Bower and call it in Grunt
First I have a .bowerrc file which very simply says this:
{
"directory": "vendor"
}
That tells Bower where to install things. So when I run bower install jquery-backstretch --save in my asset folder, it saves backstretch to the vendor folder.
In my gruntfile.js, I have this to pull in my backstretch arguments and the main file into one file, uncompressed, a folder level up:
concat: {
// Combine all the JS into one
backstretch: {
src: ['js/backstretch.args.js', 'vendor/jquery-backstretch/jquery.backstretch.min.js'],
dest: '../js/backstretch.js',
},
},
Just like magic.
Tell Grunt to Update Bower
But while Bower pulled in the packages, I don’t want to have to tell Bower ‘Hey, make sure everything’s up to date!’ every few days. I want to make sure I’m on the latest version of a branch most of the time, for security reasons at the very least. That means I have this in my bower.json file:
"dependencies": {
"bourbon": "~4.2.3",
"neat": "~1.7.2",
"jquery-backstretch": "~2.0.4"
}
So if I run bower update I would get this:
bower jquery-backstretch#~2.0.4 cached git://github.com/srobbin/jquery-backstretch.git#2.0.4 bower jquery-backstretch#~2.0.4 validate 2.0.4 against git://github.com/srobbin/jquery-backstretch.git#~2.0.4 bower bourbon#~4.2.3 cached git://github.com/thoughtbot/bourbon.git#4.2.3 bower bourbon#~4.2.3 validate 4.2.3 against git://github.com/thoughtbot/bourbon.git#~4.2.3 bower neat#~1.7.2 cached git://github.com/thoughtbot/neat.git#1.7.2 bower neat#~1.7.2 validate 1.7.2 against git://github.com/thoughtbot/neat.git#~1.7.2 bower jquery#~1.9.1 cached git://github.com/jquery/jquery.git#1.9.1 bower jquery#~1.9.1 validate 1.9.1 against git://github.com/jquery/jquery.git#~1.9.1 bower neat#~1.7.2 install neat#1.7.2 bower bourbon#~4.2.3 install bourbon#4.2.3 neat#1.7.2 vendor/neat └── bourbon#4.2.3
Cool. But who wants to run that every day?
Instead, I ran npm install grunt-bower-update --save-dev to install a new Grunt tool, Bower Update. With that code added to my gruntfile.js, every time I run my grunt update command, it first updates my libraries and then runs the processes.
There is a downside to this. I use git to keep track of my work and either track the vendor packages in my repo (which can make it a little large) or I can remember to install the packages. There are other ways around this, like using grunt-bower-task to set up things to install if not found, update if they are found. I went with including them in my repos, which makes the git pull a bit large (it added about 6000 files), but since I properly delete my assets folder when I deploy from git, it won’t impact the size of my server’s package.
Register a New Bower Package
Randomly, when I initially tried to install backstretch, I forgot it was named ‘jquery-backstretch’ and did this:
$ bower install backstretch --save bower ENOTFOUND Package backstretch not found
Obviously the right fix is to use the right repo name (and bower has a great search tool to help me to that). But what if I did want to package it up as backstrech? Or if I wanted to add my own repo? Well I would have to register that package first. And that’s pretty easy:
bower register backstretch git://github.com/srobbin/jquery-backstretch.git
Your Tricks?
Do you have Bower tricks?