Software Development, Web Design, Training


CF Camp Notes: Get Grulping With JavaScript Task Runners, Matt Gifford

Get Grulping With JavaScript Task Runners, Matt Gifford

"Life is really simple but we insist on making it complicated." --Confucius

Almost all quality improvement comes via simplification of design, manufacturing, layout, processes, and procedures

To get Grunt running, must have Node.js installed first

Current rev is 0.4+
Lots of tutorials are for 0.3 and a LOT changed since then.

over 3700 plugins as of today.

You need --
and the grunt file

package.json file:
npm init
-- node builds this file for you.
-- defaults everything based on the folder name

now we need to install grunt itself:
npm install [ whatever the module name is ]

npm install grunt-cli -g

-g installs the CLI package globally.
Now has the ability to run different local versions of Grunt
so if you have a legacy project on version 3, it can still use version 3 tasks. But my new project can use version 4, etc.

Now that we have the global CLI, we need to install it into our project.

grunt --version
checks version number

Lives in the root directory of your project
commit it into your source control repo
holds your task configuration
can be written as a (coffeeScript file)

the bare minimum we need to get Grunt up and running:

CSS concatentation
npm install grunt-contrib-concat --save-dev

anything -contrib is pretty forwrad-version compatible, developed by the Grunt team
if it doesn't have this, it's community built and more prone to breaking

tells Grunt "here's a plugin i want to use"


generates a hash off the file contents, so you can easily tell if, say, your CSS has changed and needs to be re-minified, etc.
aka "cache busting"

essentially this deletes files we don't need any more

too many tasks --
we already have several tasks going on
what happens when we need to run them all
type each command out?

task for watching files

removes console.log calls from your JS files!

Linting in your JS files

JS minifier

to perform http requests so you don't have to jump out of IDE and go to /?reload=true to restart my app/framework and uncache things, etc.