Editing Using Grunt With Web Projects (section)

== Configuration ==

See also [[:Category:Grunt#prerequisites|Grunt prerequisites]]

=== Preparing a new Grunt project ===

Installation depends on creating two files, `package.json` and `gruntfile.js`, in the project directory.
* `package.json` specifies the project properties and its Grunt library dependencies.
* `gruntfile.js` configures the Grunt tasks.

The easiest way to install Grunt and Grunt plugins is with 
<syntaxhighlight lang="bash">
$ npm install <module> --save-dev
</syntaxhighlight>

The `--save-dev` option updates the `package.json` file with the module name and version. 

=== Workflow ===

'''N.B.''' while all of the `npm` commands will work fine in the '''git bash''', '''cygwin''', and '''powershell''' shells, the `grunt` command will only work correctly in '''powershell'''.

Start at the project's root directory: 

<syntaxhighlight lang="bash">
$ cd </path/to/project/root>
</syntaxhighlight>

Create a boilerplate `package.json` file: 

<syntaxhighlight lang="bash">
$ npm init
</syntaxhighlight>

Install the latest version of Grunt for the project:

<syntaxhighlight lang="bash">
$ npm install grunt --save-dev
</syntaxhighlight>

Add the `node_modules` directory to `.gitignore`.

Add Grunt plugins as necessary, e.g.:

<syntaxhighlight lang="bash">
$ npm install grunt-contrib-uglify --save-dev
</syntaxhighlight>

Configure tasks in `gruntfile.js`:

<syntaxhighlight lang="javascript">
module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      build: {
        src: 'src/<%= pkg.name %>.js',
        dest: 'build/<%= pkg.name %>.min.js'
      }
    }
  });

  // Load the plugin that provides the "uglify" task.
  grunt.loadNpmTasks('grunt-contrib-uglify');

  // Default task(s).
  grunt.registerTask('default', ['uglify']);

};
</syntaxhighlight>

=== See also ===

* [http://gruntjs.com/getting-started#preparing-a-new-grunt-project|Grunt: Preparing a New Grunt Project]

[[Category:Grunt]] [[Category:JavaScript]] [[Category:Web Development]]