grunt.js – A javascript task-runner – Tasks

View Github Repository Open presentation in a new window

jonathanvw

See all presentation from jonathanvw

grunt.js – A javascript task-runner – Tasks

0 0

gruntjsdemo

Demonstration of the automation power of grunt.js

On Github jonathanvw / gruntjsdemo

grunt.js

A javascript task-runner

Jonathan Van Winkle

GRUNT

  • grunt is a task-based command line build tool for javascript projects
    • aka: Automation Magic
  • Similar to Codekit or Hammer
  • ...ant, rake, or guard
  • Written in javascript on Node.js
  • Bottom Line: it runs TASKS

Tasks

do the grunt work

Tasks that I do regularly that grunt do for me:

  • JS/CSS Minification
  • File concatenation
  • Parsing languages like:SASS, LESS, CoffeeScript, etc
  • JSLinting
  • Sprite image generation
  • Image optimization

Tasks

All of these plugins and more are available at:

https://gruntjs.com/plugins

Currently there are 2,215 plugins available.

Note: "Official" plugins begin with grunt-contrib-

SETUP: Node.js

node.js Prerequisites

  • GCC 4.2 or newer
  • GNU make 3.81 or newer.Pre-installed on most systems. Sometimes called gmake.
  • python 2.6 or 2.7.The build tools distributed with Node run on python.

SETUP: Node.js

Install the dependencies

$ sudo apt-get install g++ curl libssl-dev apache2-utils
$ sudo apt-get install git-core

SETUP: Node.js

Go to the node.js website and click the install button: nodejs.org

OR...

Install Node Version Manager

$ curl https://raw.github.com/creationix/nvm/master/install.sh | sh

Then activate nvm command

$ source ~/.nvm/nvm.sh

SETUP: Node.js

Install the dependencies

$ nvm install 0.10
##################################################### 100.0%
Now using node v0.10.24
$ node -v
v0.10.24

SETUP: Grunt

Grunt CLI(Command Line Interface)

$ npm install -g grunt-cli

SETUP: Grunt

package.json

{
"name": "my-project-name",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.2",
    "grunt-contrib-jshint": "~0.6.3",
    "grunt-contrib-nodeunit": "~0.2.0",
    "grunt-contrib-uglify": "~0.2.2",
    "grunt-contrib-watch": "~0.5.3"
  }
}

SETUP: Grunt

Gruntfile.js or Gruntfile.coffee

Contains the following:

  • Wrapper Function
  • Project and task configuration
  • Loading Grunt Plugins and Tasks
  • Custom Tasks

SETUP: Grunt

Gruntfile.js or Gruntfile.coffee

module.exports = function(grunt) {
  // Project configuration.
  grunt.initConfig({                           
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      build: {
        src: 'src/<%= pkg.name %>.js',
        dest: 'build/<%= pkg.name %>.min.js'
      }
    }
  });
  // Load the plugins
  grunt.loadNpmTasks('grunt-contrib-uglify');    
  // Default task(s).
  grunt.registerTask('default', ['uglify']);     
};

Installing Plugins

npm install grunt-imagine --save-dev

This will install the imagine plugin. Adding "--save-dev" will add the plugin to the package.json file.

grunt.loadNpmTasks('grunt-imagemine');

Add this to gruntfile.js to enable the plugin

Installing Plugins cont'd

The actual configuration within gruntfile.js for imagine

pngmin: {
  src: [
    'components/img/*.png',
  ],
  dest: 'temp/'
},
gifmin: {
  src: ['components/img/*.gif'],
  dest: 'temp/'
},
jpgmin: {
  src: ['components/img/*.jpg'],
  dest: 'temp/',
  quality: 72 
},

The results:

I packaged these tasks into one master imgmin task and entered "grunt imgmin"

Running "grunt imgmin" task
>> Compressed 33 files
>> Uncompressed size: 19039.49kb, Compressed size: 18433.62kb, Savings: 3.18%

Running "jpgmin" task
>> Compressed 1 files
>> Uncompressed size: 754.99kb, Compressed size: 130.3kb, Savings: 82.74%

Running "gifmin" task
>> Compressed 1 files
>> Uncompressed size: 58.66kb, Compressed size: 58.66kb, Savings: 0%

Running "copy:main" (copy) task
Copied 34 files

DEMO

Other perks

  • LiveReload
  • JSLinting
  • Image Sprites
  • SASS/LESS compiling
  • Clean up log statements for production
  • Unit Testing
  • You can write your own plugin!

DEMO

Grunt saves you time so you can spend it on other higher level pursuits like slot machines or bitcoin mining