Grunt Setup and Configuration

Gruntfile.js

The Base Gruntfile

Gruntfile.js

// Gruntfile.js // our wrapper function (required by grunt and its plugins) // all configuration goes inside this function module.exports = function(grunt) { // =========================================================================== // CONFIGURE GRUNT =========================================================== // =========================================================================== grunt.initConfig({ // get the configuration info from package.json ---------------------------- // this way we can use things like name and version (pkg.name) pkg: grunt.file.readJSON('package.json'), // all of our configuration will go here }); // =========================================================================== // LOAD GRUNT PLUGINS ======================================================== // =========================================================================== // we can only load these if they are in our package.json // make sure you have run npm install so our app can find these grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-less'); grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTasks('grunt-contrib-watch'); };

module.exports

grunt.initConfig()

package.json

pkg

pkg.name

pkg.version

grunt.loadNpmTasks()

Package Configuration

grunt.initConfig()

// Gruntfile.js grunt.initConfig({ // configure jshint to validate js files ----------------------------------- jshint: { options: { reporter: require('jshint-stylish') // use jshint-stylish to make our errors look and read good }, // when this task is run, lint the Gruntfile and all js files in src build: ['Gruntfile.js', 'src/**/*.js'] } });

Call the name of the package ( jshint ) Set options if we have to. These are usually found on the docs for each specific package Create a build attribute and pass in files, directories, or anything else we want.

Naming Conventions

build

jshint

dev

production

jshint:dev

jshint:production

To define our configuration for Grunt, we will use ourfile. This is the default place where our settings will go.In our, let's go ahead and add in the basic things we need for our project.We will use the(wrapper) function. This is the Node way of exposing our configuration to the rest of our application. We don't have to worry about this too much, but if you are interested, read this great article on the topic. Inside of our, we have taken the information from ourand saved it to. With this, we can use the attributes from our package.json file. We can call the name of our project usingand the version with. We could also expand this and even use an author.Good question. We'll see the usage in a bit, but one of the cool things we can do is use these attributes to create comments at the top of our files with project name, author, date built, and version! Pretty neat. We have also loaded our grunt plugins using. This is the way we can use the plugins that we brought in earlier usingWith our basic Grunt configuration ready, let's look at configuring one of our packages. Let's start with the JSHint package to lint our JavaScript files and tell us if there are any errors. This is the way for Grunt to know which files we want it to lint, minify, or anything else we want to do. When we configure packages, it will go into oursection and it will follow a certain structure. Here is the basic structure of configuring a Grunt package:This will be the basic format for how we configure our packages. We will:When naming the tasks, we are going to name our main task. You can name this what you want and you could even create more than one task. When you run grunt, all of the tasks will automatically be run. If you wanted to create tasks within theconfiguration, you could name themand. Then we can call the tasks later by usingor. Now that we have seen the basic setup for a Grunt package, let's go ahead and start creating configurations for the tasks we want to do.