CF Camp Notes: Get Grulping With JavaScript Task Runners, Matt Gifford
October 22, 2014
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.
"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.