Working with an existing Grunt project

Assuming that the Grunt CLI has been installed and that the project has already been configured with a package.json and a Gruntfile, it's very easy to start working with Grunt:

Working with an existing Grunt project

Installed Grunt tasks can be listed by running grunt --help but it's usually a good idea to start with the project's documentation

Preparing a new Grunt project

Preparing a new Grunt project package.json

{
  "name": "my-project-name",
  "version": "0.1.0",
  "author": "Ingo Fahrentholz",
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-jshint": "~0.6.3",
    "grunt-contrib-nodeunit": "~0.2.0",
    "grunt-contrib-uglify": "~0.2.2"
  }
}

Install Grunt-Plugins

npm install MODULENAME --save-dev

Not only will this install locally, but it will automatically be added to the devDependencies section, using a tilde version range.

The Gruntfile

The Gruntfile.js or Gruntfile.coffee file is a valid JavaScript or CoffeeScript file that belongs in the root directory of your project, next to the package.json file, and should be committed with your project source.

The Gruntfile - Example

/*global module:false*/
module.exports = function(grunt) {

// Project configuration.
grunt
.initConfig({
  // Metadata.
  pkg : grunt.file.readJSON('package.json'),
  banner : '/*! <%= pkg.title || pkg.name %> - v<%= pkg.version %> - '
  + '<%= grunt.template.today("yyyy-mm-dd") %>\n'
  + 'by <%= pkg.author %>; */\n',
  // Task configuration.
  concat: {
    options: {
      banner: '<%= banner %>',
      stripBanners: true
    },
    bundle: {
      src: ['js/work/bundler/**/*.js'],
      dest: 'dist/app/bundle.js'
    },
  },

  });

// These plugins provide necessary tasks.
grunt.loadNpmTasks('grunt-contrib-concat');
// Default task.
grunt.registerTask('default', ['concat']);
// Custom task.
grunt.registerTask('concat', ['concat']);
};