What Does It Mean To Modernize?
Modernizing has a different meaning to each person. A manager might think it means switching to agile. A sales associate might consider it to be updating to the latest POS system. As a developer (or code hobbyist), it probably means to adopt automation and abstraction.
Grunt and Bower are two command-line utilities for automating tasks and dependency management, respectively.
With a few simple commands, they will install all dependencies, concatenate your files, minify the contents, and so much more.
How Do Grunt and Bower Help You?
Quite simply. They take the grunt work out of your work flow. Grunt can be expanded to run various tasks, which can be installed, used in conjunction with each other, and with custom parameters. It’s basically like a robot assistant that’ll do what you program it to.
Bow out of updating your third-party libraries by hand. Bower will download the libraries you use and update them for you. All you need to do is specify what version you want (or let Bower decide).
Else, if you run some sort of Linux distro, you can find instructions online. Ubuntu users have this.
Check that node works with
NPM is the utility for the Node Package Manager, which manages all your local and global node modules.
Note: On Linux distros, it may be necessary to run Node commands with root privileges. Simply prepend
sudo whenever you call
Setting Up Your
The NPM knows what packages you need using a
package.json file from your execution root. So, it doesn’t need to be anywhere, just in the same directory when you install your package dependencies.
You can generate one using
npm init which runs you through some questions to setup a custom
Here’s a sample
You do the installation with,
Setting Up Grunt
To start using it, you need to install a commandline package globally. Do that with,
Then, in the same directory as your
All Grunt tasks are specifies in a Gruntfile.
Here’s a sample
You can run the task by name with
Read more on Grunt on its official website.
Setting up Bower
Bower manages your dependencies and a little more than that. Get started with it by installing via
Bower keeps track of its dependencies in a
Like with the
package.json, you can get a basic
As always, here’s a sample
Install libraries with the
You can even search for libraries with the
The location Bower installs libraries is specified by the
The contents are only a relative directory, like
Bonus: Integration with Jekyll
I’m pleased to say that Jekyll, Grunt, and Bower play remarkably well together!
In fact, generated changes to the Grunt watched files trigger a regeneration on Jekyll’s end!
It makes for a nice flow.