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

Our Skills

About

Strict Coding Standards

Service List

Contact Us

SEO Services

Links