Grunt and Gulp Quick Start Guide

GRUNT

Install Grunt and usage

1. Install the command-line interface

npm install -g grunt-cli

 

2. With the command line, navigate to the folder where you want to run grunt; such as a web application or website folder.

cd myfoldername

 

3. Install Grunt locally

npm install grunt --save-dev

 

4. Make a simple grunt file called gruntfile.js

module.exports = function(grunt) {
    grunt.initConfig({
    jshint: {
      files: ['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']);
  console.log('File Changed');

};

 

5. Make a simple package.json file or run the command 'npm init' to make it from the command line. Below is an example of a package.json file with all desired and required dependencies.

{
  "name": "Test-Project",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-concat": "~0.1.3",
    "grunt-contrib-jshint": "^1.0.0",
    "grunt-contrib-uglify": "^2.0.0",
    "grunt-contrib-watch": "^1.0.0",
    "grunt-livereload": "^0.1.3"
  }
}

 

Here is how dependencies can be installed.

npm install grunt-contrib-jshint --save-dev
npm install grunt-contrib-watch --save-dev
npm install grunt-livereload --save-dev

 

GULP
Here is how to get up in running with Gulp.

Install globally just as you would Grunt.

npm install -g gulp

 

Go to desired folder.

cd myfoldername

 

Create a simple package.json file or run the command 'rpm init' to create it in the command line. See sample package.json file below.

{
  "name": "test",
  "version": "0.1.0",
  "devDependencies": {
  }
}

 

Install Gulp locally

npm install gulp --save-dev

 

Create a file called gulpfile.js and add your desired task(s). Sample gulpfile shown below.

var gulp = require('gulp');

livereload = require('gulp-livereload');

gulp.task('watch', function () {
    livereload.listen();
    
    gulp.watch('test/*.html').on('change', function(file) {
        livereload.changed(file.path);
        console.log('File Changed');
        gutil.log(gutil.colors.yellow('HTML file changed' + ' (' + file.path + ')'));
    });
});

 

Add required dependencies. Doing this will automatically modify package.json too.

npm install gulp-concat --save-dev
npm install --save-dev gulp-livereload
npm install gulp-uglify gulp-rename --save-dev

 

Here is how package.json will look after dependencies are installed.

{
  "name": "my-project",
  "version": "0.1.0",
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-concat": "^2.6.0",
    "gulp-livereload": "^3.8.1",
    "gulp-watch": "^4.3.9"
  }
}

 

Le't run the watch task and see the console change when any html file in the test folder is modified.

gulp watch