Test presentation

Getting started with GRUNT

Teacher: JuanMa Garrido

Clear Ideas about Grunt

Grunt and Grunt-plugins are installed and managed via npm, the Node.js package manager.
To use Grunt from comand line we have to install (globally) the Grunt's CLI → npm install -g grunt-cli
In new projects we install Grunt and Grunt-plugins as node modules → npm install --save-dev grunt grunt-contrib-jshint
In existing Grunt projects we install Grunt and Grunt-plugins with → npm install

Clear Ideas about Grunt

Main Files:
- package.json: The Grunt runner and Grunt plugins used in the Gruntfile.js are set as project dependencies in this file
- Gruntfile.js: The tasks are defined/configured and grunt plugins are loaded in this file

Clear Ideas about Grunt

sample package.json:

{
  "name": "my-project-name",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.5",
    "grunt-contrib-jshint": "~0.10.0",
    "grunt-contrib-nodeunit": "~0.4.1",
    "grunt-contrib-uglify": "~0.5.0"
  }
}

Clear Ideas about Grunt

sample Gruntfile.js:

module.exports = function(grunt) {
  grunt.initConfig({
    jshint: {
      files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
      options: {
        globals: {
          jQuery: true
        }
      }
    },
    watch: {
      files: ['<%= jshint.files %>'],
      tasks: ['jshint']
    }
  });
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.registerTask('default', ['jshint']);
};

Clear Ideas about Grunt

Productivity → with Grunt we can automate everything in the development environment: minify, checking, testing, concatenate, uglify, transcompile, deploy...
Community → more than 4000 grunt plugins available at NPM
Transcompilation → Ease the source-to-source compilation (Haml, Jade, Sass, LESS, Stylus, CoffeeScript, Dart, TypeScript, and more.)

Clear Ideas about Grunt

Grunt is not alone in the task-manager/build-tools world:
- grunt, cake, broccoli, gulp and more
- rake, capistrano
- paver, pynt
- ant
- phing

Clear Ideas about Grunt

Released in March 2012 by Ben Allman

Using Grunt in an existing project

Steps:
1. Change to the project's root directory.
2. Install project dependencies with npm install
3. Run Grunt with grunt

Using Grunt in an existing project

$ git --version
$ node -v
$ npm -v
$ npm install -g grunt-cli
$ git clone https://github.com/juanmaguitar/grunt-workshop.git
$ cd grunt-workshop
$ npm install
$ grunt --version
$ grunt -h
$ grunt tasks
$ grunt compass
$ grunt shower
$ grunt serve

Using Grunt in an existing project

[+]

Creating my first Grunt project

Steps:
1. Create a project folder (and src subfolder)
2. Create a package.json interactively with npm init
3. Create a simple Gruntfile.js (simple task, no plugin loading)
4. Launch the task w/ Grunt

Creating my first Grunt project

.
├── Gruntfile.js
├── package.json

$ mkdir project
$ cd project/
$ mkdir src
$ npm init
$ npm install --save-dev grunt
$ vi Gruntfile.js
    module.exports = function(grunt) {
        grunt.registerTask('foo', function() {
               grunt.log.writeln('foo is running...');
        });
    };
$ grunt foo

Creating my first Grunt project

[+]

Loading Grunt plugins

Steps:
1. Create a project folder and src subfolder
2. Create a package.json interactively with npm init
3. Create a Gruntfile.js (as defined here)
4. Launch the default task w/ Grunt

Loading Grunt plugins

.
├── Gruntfile.js
├── package.json
└── src
    └── foo.js

$ mkdir project2
$ cd project2/
$ mkdir src
$ npm init
$ npm install --save-dev grunt grunt-contrib-jshint

Loading Grunt plugins

$ vi Gruntfile.js
    module.exports = function(grunt) {
      grunt.loadNpmTasks('grunt-contrib-jshint');
      grunt.initConfig({
        jshint: {
          options: {
            curly: true,
            eqeqeq: true
          },
          target1: ['Gruntfile.js', 'src/**/*.js']
        }
      });
      grunt.registerTask('default', ['jshint']);
    };
$ grunt

Loading Grunt plugins

[+]

Clear Ideas about Gruntfile.js

grunt.initConfig({...}) → Configuration object

grunt.initConfig({
  pkg: grunt.file.readJSON('package.json')
  uglify: {
      options: {
          // the banner is inserted at the top of the output
          banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
      },
      dist: {
          files: {
              'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
          }
      }
  }
});

Clear Ideas about Gruntfile.js

Tasks are configured via initConfig using task-named properties as key of a configuration object that has:
- targets → groups of files/options (dist) → grunt uglify:dist
- options → custom setting overriding general settings (also target devel)
- files → src & dest files

Clear Ideas about Gruntfile.js

grunt.loadNpmTasks(...); → Load the Grunt plugins.
- grunt.loadNpmTasks("grunt-contrib-uglify");
grunt.registerTask(...); → Aliases for already loaded/created tasks
- grunt.registerTask('default', ['jshint', 'qunit', 'concat', 'uglify']);

Fully functional Grunt project

├── Gruntfile.js
├── dist
├── index.html
├── package.json
├── src
│   ├── js
│   │   ├── bar.js
│   │   └── foo.js
│   ├── scss
│   │   └── styles.scss
│   └── vendor
│       └── jquery-2.1.3.js
└── test
  ├── barSpec.js
  └── fooSpec.js

Fully functional Grunt project

Given the previous structure, create a Grunt project that provides the following tasks:
grunt concat → concatenate all .js files at src folder (using ; as separator) in a npm-project-named .js file placed at dist folder
grunt uglify → uglify file generated by concat task into a new .min.js file placed at dist folder
grunt jshint → validate the js code (Gruntfile.js, src/js, test)

Fully functional Grunt project

grunt compass → compile src/styles.scss file into a dist/styles.css
grunt or grunt default→ launches all previous tasks (jshint, concat, uglify, compass)
grunt watch → watch any change done at Gruntfile.js or src folder and launches default task w/ new changes

Fully functional Grunt project (extras)

grunt jasmine → launch all jasmine tests at test folder (add it to default task)
grunt serve → launch a local server at localhost:8081 (after launching default task)

##More info

Getting started with Grunt

Getting started with GRUNT

Teacher: JuanMa Garrido

Contents

Clear Ideas about Grunt

Clear Ideas about Grunt

Clear Ideas about Grunt

Clear Ideas about Grunt

Clear Ideas about Grunt

Clear Ideas about Grunt

Clear Ideas about Grunt

Using Grunt in an existing project

Using Grunt in an existing project

Using Grunt in an existing project

Creating my first Grunt project

Creating my first Grunt project

Creating my first Grunt project

Loading Grunt plugins

Loading Grunt plugins

Loading Grunt plugins

Loading Grunt plugins

Clear Ideas about Gruntfile.js

Clear Ideas about Gruntfile.js

Clear Ideas about Gruntfile.js

Fully functional Grunt project

Fully functional Grunt project

Fully functional Grunt project

Fully functional Grunt project (extras)