Install Grunt JS on Windows – Tutorial
Posted by robert | Filed under JavaScript
Before you install Grunt.js you will need to have node.js installed. For this tutorial I have node.js v0.10.0 installed.
I will be installing Grunt.js v0.4.1. WARNING if you have Grunt.j 0.3.x or less you will need to uninstall it first.
Grunt’s command line interface (CLI)
To get grunt.js installed we need to first install Grunt’s command line interface (CLI) globally. Current version is 1.0.6. Open up Windows Command Prompt and put in the command below:
npm install grunt-cli -g
This will put the grunt command in your system path, allowing it to be run from any directory.
Windows Tip – Open Command Prompt from Folder (Two Ways)
- Type cmd into the address bar and hit enter
- Hold Shift while Right-Clicking a blank space in the folder and select Open Command Window Here.
Folder and Package JSON Setup
Now we need to install Grunt.js. With Windows Command Prompt navigate to our project folder. I like to put all my build files into a folder called “_build”. So for this example the path is “C:\Users\codebelt\Desktop\first-grunt-project\_build”.
There are a few different ways to get Grunt.js and other plugins installed but I will be showing you the easiest way (I think). We need to create a “package.json” and put it in our “_build” folder. Copy and past code below and put in the “package.json”
{
"name": "Test-Project",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-concat": "~0.1.3"
}
}
When the next command below is ran it will install grunt v0.4.1 and the grunt plugin concat v0.1.3 into the “_build” folder.
Here is the command:
npm install
Grunt File Setup
Now Grunt.js and the Concat plugin should be installed. Now we need to add a Grunt file to configure and build our project. Create a “Gruntfile.js” file inside the “_build” folder and paste in the code below.
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
//Read the package.json (optional)
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/fileone.js', '<%= meta.srcPath %>scripts/filetwo.js'],
dest: '<%= meta.deployPath %>scripts/app.js'
}
}
});
// These plugins provide necessary tasks.
grunt.loadNpmTasks('grunt-contrib-concat');
// Default task
grunt.registerTask('default', ['concat']);
};
If you look you can see I have created a fileone.js and filetwo.js file and placed them into the ../src/scripts directory. This GruntJS script will take those files and export into the ../deploy/scripts folder as app.js. 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 location than having it hard coded all over the Gruntfile.
Now type “grunt” into Windows Command Prompt and watch the magic happen.
grunt
That will run the Default task and concatenate the two js files into one. Try it out, I hope this works for you. You should see the output in Windows Command Prompt say:
Running "concat:dist" (concat) task File "../deploy/scripts/app.js" created. Done, without errors.
You can download the example files for this tutorial here:
Hello, my name is Robert and I am an interactive developer at
May 20, 2013 at 7:38 am
Thank you for this article! Much, much more straightforward than the “getting started” document on the Grunt site. With your help, I was able to get Grunt up and running =)
The one thing that your article might have done to make the process even clearer is to indicate the need to create fileone.js and filetwo.js files and place them in the ../src/scripts directory in order for the build process to run as expected.
It kind of surprised me that Grunt didn’t throw an error when it couldn’t find the files. Anyhow, after adding the files, everything ran and concatenated as expected. Thanks again!
May 20, 2013 at 8:04 pm
Thanks for the comment. I have updated the article. I also have the files for download to help people if they got stuck.
July 24, 2013 at 11:07 am
This really helps – been struggling to put the pieces together on grunt.
September 23, 2013 at 8:31 pm
[…] These instructions from codeBelt worked nicely. […]
December 5, 2013 at 11:27 pm
A fantastic article for installation of gruntjs !! Helps a lot!! Really Thanks!!
December 23, 2013 at 9:00 pm
Thank you very much for the tutorial, as a designer getting started with Grunt was tough, no visual software just command prompt. Your explanation in this page really help out a lot :D
April 3, 2014 at 5:06 am
Thanks so much Robert, your tutorial is very simple and easy to understand. Today I have start learning Grunt and your tutorial help me to go one step ahead. Now I want to do little bit more like minify:-
Can you please help me to minify my custom.js file as custom.min.js
Here is the code Gruntfile.js which I’m trying:-
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
min:{
dist:{
src:’../src/scripts/custom.js’,
dest: ‘../src/scripts/custom.min.js’
}
}
});
};
But I’m getting error in window – cmd as:-
Warning: Task “default” not found. Use –force to continue
Aborted due to warnings.
April 4, 2014 at 7:21 pm
I think it be because you don’t have the required “default” grunt task:
grunt.registerTask('default', [
'min'
]);
It should look like this:
I think it be because you don’t have the required “default” grunt task:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
min:{
dist:{
src:'../src/scripts/custom.js',
dest: '../src/scripts/custom.min.js'
}
}
});
grunt.registerTask('default', [
'min'
]);
};
I’ve used grunt-contrib-uglify before and it great for getting started with minifying.
May 17, 2014 at 12:22 am
Hey, even without knowing the English could not understand your article, thank you!
August 9, 2014 at 5:45 pm
Nice Post :) Thanks you.
How can I find the grunt watch config ?
Thanks,
August 13, 2014 at 7:27 pm
You check out my Single Page JavaScript Application Workflow or Compile SASS files into one CSS file tutorials how to use the Grunt watch task.
August 10, 2014 at 8:56 am
Late to the party here but wanted to say thank you. This saved me a ton of time!
October 20, 2014 at 10:06 am
Thank you it was really helpful for getting started with Grunt on Windows platform.
January 22, 2015 at 10:21 am
Thanks a lot for sharing this article. Its really helpful and a nice post.
February 1, 2015 at 11:03 am
Thank You
February 5, 2015 at 3:13 am
simple. concise. precise.
Thanks Robert for such a wonderful article. It saves my day.
March 28, 2015 at 7:47 am
Hi, please, can you help me with one problem, i install nodejs on window 8 and try to use grunt, i install grunt via npm, but when i try to use command grunt in windows console i get the error – grunt: command not found, thank you
June 16, 2015 at 12:56 am
Thanks for the article. it really works.. I have an angular project having js files in different folder and I want to minify all the js files and placing in their respective folders . How can i do this ?
August 9, 2015 at 8:41 pm
Thanks for the tutorial.
How to run cmd on any path easily was an awesome trick and that also saved my ass in some way.
Much appreciated.
October 21, 2015 at 1:03 am
Hi Robert,
Tutorial is very informative :)
Can we use external source to get the files like:
// Metadata.
meta: {
basePath: ‘../’,
srcPath: ‘https://raw.githubusercontent.com/omerblink/avatec/master/’,
deployPath: ‘../template/’
},
???
Thanks Omer
May 16, 2016 at 10:32 am
[…] Αρχικά στο https://codebelt.github.io/blog/javascript/install-grunt-js-on-windows/ […]
October 11, 2016 at 1:39 pm
Hello,
One of my questions is do you have to a package.json and a gruntfile.js in every javascript project where you are going to use grunt to build the project?
May 17, 2017 at 10:39 am
Hi Robert,
Everything seemed to be moving smoothly till the fileone.js and filetwo.js thing came in. Don’t really know how to take it on from there. Don’t know where to find the link to download the example files (don’t know if they are the fileone.js and filetwo.js) after the “You can download the example files here:” text.
Please Advice.