Installing
Grunt Task Runner is simple enough when you know how to install it, but it's quite frustrating when you are installing it the first time. Once you started using grunt, you will never leave it. Here are some simple steps to install and run.
1. Download and install NodeJS from
here.
Once you are done with the installation of NodeJS, create folder somewhere on your hard-drive and name it as
first-grunt-project. Now, create a project structure inside the first-grunt-project folder as:
-first-grunt-project
-- dev
-- js
-- styles
-- less
-- variables.less
-- colors.less
-- style.less /*we need to import all less files in this file with @import "variables.less" and so on
-- css
-- style.css
-- index.html
Now right click inside the root folder that is
first-grunt-project and select the option
Open command window here. Since you have already installed NodeJS just verify the version with a command
node --version that should show you the NodeJS version you have installed.
2. Create a new file called
package.json and save it at the root directory:
first-grunt-project
-- package.json
Add this code in package.json file and save it. You can check the current version of package.json
here. More information on package.json can be read at the
npm website.
{
"name": "grunt-project",
"version": "1.2.5"
}
3. Go to command window and type
npm install -g grunt-cli, this will install the cli for you.
Note: npm stands for Node Package Manager.
And cli stands for Command Line Interface
4. Create a new js file and save it as
Gruntfile.js. Add the following code in it. This code is to compile LESS files to CSS. Refer the video below for installing JavaScript plugins.
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
less: {
development: {
options: {
compress: true,
yuicompress: true,
optimization: 2
},
files: {
// target.css file: source.less file
"styles/style.css": "styles/less/styles.less"
}
}
},
watch: {
styles: {
files: ['styles/less/**/*.less'], // which files to watch
tasks: ['less'],
options: {
nospawn: true
}
}
}
});
//plugins
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-watch');
//tasks
grunt.registerTask('default', ['less','watch']);
};
5. Go to command window and type
npm install grunt --save-dev this will install grunt for you.
You are ready with the installation of grunt, you can confirm that by running
grunt --version command. After installing grunt, install the two
plugins we are using in the gruntfile.js above for compiling LESS file - that are
contrib less and
contrib watch.
Videos:
All about packge.json and gruntfile.js:
All about creating a basic project with Grunt:
Create another folder and try with installing grunt first and the cli and then the next steps from here - http://ericnish.io/blog/compile-less-files-with-grunt and see the effect
