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

Answer 1

To setup GruntJS build here is the steps:

1. Make sure you have setup your package.json or setup new one:

   npm init
   

2. Install Grunt CLI as global:

   npm install -g grunt-cli
   

3. Install Grunt in your local project:

   npm install grunt --save-dev
   

4. 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
   

5. 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']);
   };
   

6. 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.

Answer 2

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.

Answer 3

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).

Answer 4

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.