Software Development, Web Design, Training

Oct-22-2014

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

http://gruntjs.com
@gruntjs

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 --
package.json
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

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



the bare minimum we need to get Grunt up and running:
package.json
Gruntfile.js

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

grunt.loadNpmTasks('grunt-contrib-concat')
tells Grunt "here's a plugin i want to use"

minification
grunt-contrib-cssmin


grunt-rev
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"

grunt-contrib-clean
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?


grunt-contrib-watch
task for watching files

grunt-remove-logging
removes console.log calls from your JS files!

grunt-contrib-jshint
Linting in your JS files

grunt-contrib-uglify
JS minifier

grunt-http
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.