Getting up and running with Grunt
Installing Node.js and updating npm
NPM (node package manager) is used to install and manage Grunt and Grunt plugins (among other things). So firstly you'll need to make sure Node.js is installed. From Grunt 0.4x onwards you'll need a stable version of Node.js >=0.80
. Odd version numbers are considered unstable development versions.
To ensure npm is up to date run
npm update -g npm
Next up you'll need to install the Grunt CLI (Command Line Interface)
npm install -g grunt-cli
This puts the "grunt" command in your system path and allows it to be run from any directory. Each time Grunt is run, it looks for a locally installed Grunt using Nodes require()
. Now Grunt can be run from any subfolder in a project. If a locally installed Grunt is found, the CLI loads the local installation of the Grunt library, applies the configuration from the gruntfile and executes any tasks requested to run.
This is useful as you may want to run certain development tasks in a specific subfolder, but have another set of production tasks configured in the root directory.
Setting up Grunt
A typical grunt setup will require two files:
package.json
- This is used by npm to store metadata for projects published as npm modules.
- It belongs in the root directory of the project along with the Gruntfile.
- Grunt and Grunt plugins your project needs are listed as devDependencies in this file.
- There are a few ways you can create a package.json file.
npm init
will create a basic package.json file - Or you can copy the below template with some recommended base modules and follow these specifications if you need to add more.
- Running
npm install
in the same directory as the package.json file will install all the module dependencies listed in package.json
{
"name": "project-name",
"version": "0.1.0",
"private": true,
"devDependencies": {
"grunt": "~0.4.5",
"grunt-contrib-concat": "~0.3.0",
"grunt-contrib-connect": "^0.11.2",
"grunt-contrib-copy": "^0.6.0",
"grunt-contrib-imagemin": "~0.5.0",
"grunt-contrib-uglify": "~0.3.2",
"grunt-contrib-watch": "^0.6.1",
"grunt-sass": "^1.0.0",
"grunt-svgmin": "^2.0.1"
}
}
Gruntfile
This is the config file for your tasks enabled by installed plugins. It is comprised of the following parts:
- The grunt wrapper function
- Project and task configuration
- Loading the Grunt plugins and tasks
- Any custom tasks you may want to configure
Configuring your Gruntfile
1. The wrapper function
module.exports = function(grunt) {
//everything goes in here
};
2. Project and task configuration
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
//CONCATENATE JAVASCRIPT FILES
concat: {
options: {
sourceMap: true
},
dist: {
src: [
'your/path/here/*.js',
'!but/not/this/tracking.js'
],
dest: 'your/path/here/app.js',
}
}
});
3. Load plugins and tasks
//LOAD THE TASK THAT ALLOWS FOR CONCATENATION
grunt.loadNpmTasks('grunt-contrib-concat');
4. Create custom tasks
grunt.registerTask('default',['concat']);
Below is an example of a gruntfile with some tasks configured
//###### WRAPPER FUNCTION
module.exports = function(grunt) {
var LIVERELOAD_PORT = 35729;
//###### PROJECT AND TASK CONFIGURATION
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
//CONCATENATE JAVASCRIPT FILES
concat: {
options: {
sourceMap: true
},
dist: {
src: [
'your/path/here/*.js',
'!but/not/this/tracking.js'
],
dest: 'your/path/here/app.js',
}
},
//CONFIGURE SASS OPTIONS
sass: {
options: {
sourceMap: true,
outputStyle: 'compressed',
},
dist: {
files: {
'your/path/style.css' : 'your/path/style.scss'
}
}
},
//MINIFY JAVASCRIPT FILES
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n',
sourceMap: true
},
build: {
src: 'your/path/here/app.js',
dest: 'your/path/here/app.min.js'
}
},
//START A STATIC WEB SERVER
connect: {
server: {
options: {
port: 8080,
hostname: 'localhost',
base: '.',
livereload: LIVERELOAD_PORT
}
}
},
//WATCH FOR CHANGES IN CERTAIN FILES
watch: {
css: {
files: '**/*.scss',
tasks: ['sass']
},
options: {
livereload: LIVERELOAD_PORT,
},
scripts: {
files: ['Content/Scripts/*.js'],
tasks: ['concat', 'uglify'],
options: {
spawn: false,
}
},
html: {
files: ['*.html','**/*.css'],
options: {
livereload: LIVERELOAD_PORT
}
}
}
});
//LOAD GRUNT PLUGINS
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-svgmin');
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-contrib-watch');
//REGISTER CUSTOM GRUNT TASKS
grunt.registerTask('default',['concat', 'sass', 'connect', 'watch']);
grunt.registerTask('production',['concat', 'uglify', 'imagemin', 'svgmin']);
grunt.registerTask('images',['imagemin']);
};
5.) Run grunt to run the default grunt tasks