How to install grunt and how to build script with it

Question

Hi I'm trying to install Grunt on Windows 7 64 bit. I have installed Grunt using commands

 npm install -g grunt
 npm install -g grunt-cli

but now if I try to do grunt init, it is throwing me an error -

A valid Gruntfile could not be found. Please see the getting started guide for more information on how to configure grunt: http://gruntjs.com/getting-started Fatal error: Unable to find Gruntfile.

But when I look inside the grunt folder on my system the Gruntfile.js is there. can someone please guide me how to install this grunt properly and how to write built Script using the grunt. I have one HTML page and java script if i wants built a script using Grunt how can i do it?

`npm install -g grunt` means installing Grunt globally which is no longer recommended (starting with Grunt 0.4). — Ludder, Apr 12 '13 at 19:55

score 242 · Accepted Answer · edited Mar 17 '14 at 15:05

242

To setup GruntJS build here is the steps:

Make sure you have setup your package.json or setup new one:
```
npm init
```
Install Grunt CLI as global:
```
npm install -g grunt-cli
```
Install Grunt in your local project:
```
npm install grunt --save-dev
```
Install any Grunt Module you may need in your build process. Just for sake of this sample I will add Concat module for combining files together:
```
npm install grunt-contrib-concat --save-dev
```

Now you need to setup your Gruntfile.js which will describe your build process. For this sample I just combine two JS files file1.js and file2.js in the js folder and generate app.js:

module.exports = function(grunt) {

    // Project configuration.
    grunt.initConfig({
        concat: {
            "options": { "separator": ";" },
            "build": {
                "src": ["js/file1.js", "js/file2.js"],
                "dest": "js/app.js"
            }
        }
    });

    // Load required modules
    grunt.loadNpmTasks('grunt-contrib-concat');

    // Task definitions
    grunt.registerTask('default', ['concat']);
};

Now you'll be ready to run your build process by following command:
```
grunt
```

I hope this give you an idea how to work with GruntJS build.

NOTE:

You can use grunt-init for creating Gruntfile.js if you want wizard-based creation instead of raw coding for step 5.

To do so, please follow these steps:

npm install -g grunt-init
git clone https://github.com/gruntjs/grunt-init-gruntfile.git ~/.grunt-init/gruntfile
grunt-init gruntfile

For Windows users: If you are using cmd.exe you need to change ~/.grunt-init/gruntfile to %USERPROFILE%\.grunt-init\. PowerShell will recognize the ~ correctly.

edited Mar 17 '14 at 15:05

Tomalak

332,285
67
532
628

answered Mar 29 '13 at 22:41

Qorbani

5,825
2
39
47

that's what I've been looking for, thanks. also, is it required that gruntfile.js should be placed in project root folder (can't get it to work otherwise on windows)? – chester89 Jun 04 '13 at 22:06
1

Could Step 5 be setup very basically using `grunt init:gruntfile`? I've tried doing this but I always get an error: `Fatal error: Unable to find Gruntfile`. Is the creation of Gruntfile.js always a manual process? If so, I see a benefit of using Yeoman where a Gruntfile.js is auto-generated (and this still applies for projects that I would create which aren't actually webapps. – micah Jun 06 '13 at 20:35
@micah, you can use grunt-init tool for creating Gruntfile easily. I'll update main post and add it as a note. – Qorbani Jun 06 '13 at 21:17
@qorbani Then I'm confused. In a directory for this non-grunt project, I have already followed steps 1-4. Now I just ran `npm install -g grunt-init` and it installed successfully. I followed this with `grunt init:gruntfile` and it still gives me the same fatal error. What am I missing? – micah Jun 06 '13 at 21:23
grunt init:gruntfile is not correct. grunt-init is different helper for template-based scaffolding and you need to install gruntfile template to ba able to generate Gruntfile.js – Qorbani Jun 06 '13 at 21:28
That's so confusing considering what else I've read out there. But I appreciate your feedback. Is it just common practice that, if you're not using Yeoman for example, one would just manually build the Gruntfile.js from scratch and then install Grunt Modules to use within the Grunt file? – micah Jun 06 '13 at 21:39
For me it's more personal preference, because I like to have full control over my code, that's why I create Gruntfile.js manually from scratch or based on some of my previous projects. Based on my own review in GruntJS community I saw the same pattern across lots of users. – Qorbani Jun 06 '13 at 21:48
That makes complete sense and I can understand why to do it that way. I'm seasoned with front end markup and all but not strong with JS so this is all pretty new. Seeing how complicated the Yeoman Gruntfile.js is, I'm not even sure where to begin with creating on for non-Grunt/non-Node projects that I've already begun so it's daunting to figure out how to make it work. I appreciate your time and knowledge to clear up my confusions. – micah Jun 06 '13 at 21:57

Partha Sarathi Ghosh · Answer 2 · 2016-08-03T11:04:35.043

8

Some time we need to set PATH variable for WINDOWS

%USERPROFILE%\AppData\Roaming\npm

After that test with where grunt

Note: Do not forget to close the command prompt window and reopen it.

edited Aug 03 '16 at 11:04

answered Aug 03 '16 at 10:51

Partha Sarathi Ghosh

10,936
20
59
84

score 5 · Answer 3 · answered Mar 18 '15 at 05:56

5

I got the same issue, but i solved it with changing my Grunt.js to Gruntfile.js Check your file name before typing grunt.cmd on windows cmd (if you're using windows).

answered Mar 18 '15 at 05:56

andromada

51
1
4

score 4 · Answer 4 · answered Aug 21 '19 at 16:44

4

You should be installing grunt-cli to the devDependencies of the project and then running it via a script in your package.json. This way other developers that work on the project will all be using the same version of grunt and don't also have to install globally as part of the setup.

Install grunt-cli with npm i -D grunt-cli instead of installing it globally with -g.

//package.json

...

"scripts": {
  "build": "grunt"
}

Then use npm run build to fire off grunt.

answered Aug 21 '19 at 16:44

itwasmattgregg

353
2
8

The accepted answer adds `grunt-cli` as global, but `grunt` as dev. Is that similar to what you're saying here, or does `grunt-cli` have to be on dev for it to work with NPM like in your code? – qozle Aug 16 '22 at 13:40
1

@qozle it doesn't need to be in the dev section but `-D` saves it in your package json as a dev dependency. Running `npm install` installs it and makes it available to scripts run with `npm run ...`. You won't be able to run grunt directly in the command line but you can run it through node within your project. Does that make sense? – itwasmattgregg Aug 17 '22 at 18:33

How to install grunt and how to build script with it

4 Answers4

Linked