Papermashup

Subscribe


Tweets


"RT @cpray86: Good to see the receptionist's Jpeg of an Excel file is coming along nicely... #TheApprentice https://t.co/uiPGhf64U3"

@ashleyford 1 day ago

"Translation wrong for this paper it should be: Bitte nicht den Horror-Clown (Please not the Horror-clown) https://t.co/RYOD6aND6s via @bandt"

@ashleyford 3 weeks ago

Article writer and online marketer, freelancer at Fiverr. Previously worked at Konsear.com. Contact me - mubashirmazhr[at]gmail.com

Papermashup

Get started with Grunt

Use Grunt to automate just about anything with minimum effort

MubashirMubashir

What is Grunt?

It can be summarized as an automation tool. Developers have to make sure that their code is to develop, and develop well. That’s why Grunt helps them to focus on developing quality code by automating tasks such as file minification, code and compile Sass and Less, etc.

In this tutorial, I’ll be teaching you how you can setup Grunt on both Windows and Mac platforms.

Version Used

For Windows Users

Before you download and install Grunt.js you will need to have node.js installed. For this tutorial, I have node.js v0.10.0 installed. However, you can follow the tutorial using the latest version. Download Node.js from here.

I will be using Grunt.js version 0.4.1.

In order to stay away from headaches make sure you don’t have Grunt.js v0.3.x or less already installed. You’ve to uninstall it first before following the process.

Grunt’s Command Line Interface (CLI)
We first need to install Grunt’s command line interface (CLI) globally, to get grunt.js installed. Open up windows command prompt and execute the following command:

$ npm install grunt-cli –g

This will set the grunt command in your system path, allowing you to run from any directory.

How to Open Windows Command Prompt from Folder
There are two ways to open the command prompt from within the folder:

Type cmd into the address bar and hit enter OR
Hold Shift while Right-Clicking on a blank space inside the folder and select “Open Command Window Here”.

Package and Folder JSON Setup

Now Grunt.js needs to be installed. With Windows Command Prompt navigate to our setting-up-grunt folder. I like to locate all my build files into a folder called “test”. Therefore, in this example the path would be “C:\Users\papermashup\Desktop\setting-up-grunt\test”.

There are a few other different ways to get Grunt.js and concat plugin installed but I’ll keep the process as easy as possible. We need to create a package.json file and put it in our “test” folder. Copy and paste the code below into the “package.json” file.


{
"name": "Testing",
"version": "0.1.0",
"devDependencies":
{
"grunt": "~0.4.1",
"grunt-contrib-concat": "~0.1.3"
}
}

Now you’ve to execute this command:

$ npm install

This command will be installing grunt v0.4.1 and the grunt plugin called concat v0.1.3 into the “test” folder.

Grunt File Setup

Now the concat plugin and Grunt.js should be installed. Now we need to add a Grunt file to configure and build our project. Create a Gruntfile.js file inside the “test” folder and paste the code given below.


module.exports = function(grunt) {

// grunt configuration
grunt.initConfig({

//Read package.json
pkg: grunt.file.readJSON('package.json'),

// Metadata
meta: {
basePath: '../',
srcPath: '../src/',
deployPath: '../deploy/'
},

banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
'<%= grunt.template.today("yyyy-mm-dd") %>\n' +
'* Copyright (c) <%= grunt.template.today("yyyy") %> ',
// Task configuration
concat: {
options: {
stripBanners: true
},
dist: {
src: ['<%= meta.srcPath %>scripts/file1.js', '<%= meta.srcPath %>scripts/file2.js'],
dest: '<%= meta.deployPath %>scripts/application.js'
}
}
});
// plugins which provide necessary tasks
grunt.loadNpmTasks('grunt-contrib-concat');
// Default task code
grunt.registerTask('default', ['concat']);
};

As you can see I’ve created two files file1.js and file2.js and placed them inside the ../src/scripts directory. This GruntJS snippet will take those two files and export into the ../deploy/scripts folder as the application.js. We’ll use <%= meta.srcPath %> as a constant or base path to my src folder. This allows me to change the base path in one place and have hard coded all over the Gruntfile.

The magic will happen when you type grunt into windows command prompt.

The Default task will run and concatenate the two JavaScript files into one. Try it out, I hope you’ll see the expected results without any errors:


Running "concat:dist" (concat) task
File "../deploy/scripts/application.js" created.
Done, without errors.

For Mac Users

GruntJS installed via the Node Package Module (NPM), which means NodeJS must be downloaded and installed on your computer. Download NodeJS from here.

In this tutorial I will be installing Grunt.js v0.4.1 with NodeJS v0.10.0.

Note: if you have Grunt.js v0.3.x or less you will first need to uninstall it.

Grunts command line interface (CLI)

To get grunt.js installed, we first need to install Grunt’s command line interface (CLI) globally. We’ve to install version 1.0.6. Open up Terminal and put in the command below:

$ npm install grunt-cli –g

You could get an error that says Please try running this command again as root/administrator. You will need to put sudo prior to the command like this:

$ sudo npm install grunt-cli -g

This will put the grunt command within your system path, allowing it to be run from any directory.

How to Open MAC Terminal from Folder

If you have got the Terminal icon on your Dock you can drag the folder to the Terminal icon and it’ll open to that folder path.

Folder and Package JSON Setup

We need to install Grunt.js. Open up terminal and navigate to our setting-up-grunt folder. I like to put all my build files into a folder called “test”. Thus in this example the path will be “/Users/papermashup/Desktop/setting-up-grunt/test”.

There are several different ways to get Grunt.js and concat plugin installed but I will be showing you the simplest way in my opinion. We need to create a “package.json” and put it in our “test” folder. Copy and paste code below and put it inside the package.json file.


{
"name": "Testing",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-concat": "~0.1.3"
}
}

Once the following command is executed it’ll going to install the grunt plugin called concat v0.1.3 and grunt v0.4.1 into the “test” folder.

The command is:

$ sudo npm install

Grunt File Setup

Now Grunt.js and the Concat plugin should be installed. Now we have to add a Grunt file in order to configure and make our project. Create a Gruntfile.js file inside the “test” folder and paste the following code:


module.exports = function(grunt) {

// grunt configuration
grunt.initConfig({

// Read package.json (optional)
pkg: grunt.file.readJSON('package.json'),

// Meta-data
meta: {
basePath: '../',
srcPath: '../src/',
deployPath: '../deploy/'
},

banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
'<%= grunt.template.today("yyyy-mm-dd") %>\n' +
'* Copyright (c) <%= grunt.template.today("yyyy") %> ',

// Task configuration
concat: {
options: {
stripBanners: true
},
dist: {
src: ['<%= meta.srcPath %>scripts/file1.js', '<%= meta.srcPath %>scripts/file2.js'],
dest: '<%= meta.deployPath %>scripts/application.js'
}
}
});

// These plugins will provide necessary tasks
grunt.loadNpmTasks('grunt-contrib-concat');

// Default grunt task
grunt.registerTask('default', ['concat']);
};

If you notice I’ve created file1.js and file2.js files and placed them inside the ../src/scripts directory. This GruntJS code will process on those two files and export the output as an application.js in the ../deploy/scripts folder. I am using <%= meta.srcPath %> as a constant or base path to my src folder. This allows me to change the base path in one place and have hard coded all over the Gruntfile.

Now type “grunt” into Terminal and watch the magic happen.

$ grunt

It’ll run the Default task and concatenate two JavaScript files (file1.js & file2.js) into one. Try it out, hopefully this will work for you. If you’ve followed the process as it is you should see a screen that says:


Running "concat:dist" (concat) task
File "../deploy/scripts/application.js" created.
Done, without errors.

Article writer and online marketer, freelancer at Fiverr. Previously worked at Konsear.com. Contact me - mubashirmazhr[at]gmail.com

Comments 0
There are currently no comments.