[npm] How to install grunt and how to build script with it

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?

This question is related to npm gruntjs npm-install

The answer is


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.


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.


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.


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


Examples related to npm

What does 'x packages are looking for funding' mean when running `npm install`? error: This is probably not a problem with npm. There is likely additional logging output above Module not found: Error: Can't resolve 'core-js/es6' Browserslist: caniuse-lite is outdated. Please run next command `npm update caniuse-lite browserslist` ERROR in The Angular Compiler requires TypeScript >=3.1.1 and <3.2.0 but 3.2.1 was found instead DeprecationWarning: Buffer() is deprecated due to security and usability issues when I move my script to another server Please run `npm cache clean` What exactly is the 'react-scripts start' command? On npm install: Unhandled rejection Error: EACCES: permission denied Difference between npx and npm?

Examples related to gruntjs

NPM vs. Bower vs. Browserify vs. Gulp vs. Grunt vs. Webpack Karma: Running a single test file from command line Cannot install NodeJs: /usr/bin/env: node: No such file or directory Tried to Load Angular More Than Once Difference between Grunt, NPM and Bower ( package.json vs bower.json ) What does -save-dev mean in npm install grunt --save-dev grunt: command not found when running from terminal Grunt watch error - Waiting...Fatal error: watch ENOSPC How to install grunt and how to build script with it "Fatal error: Unable to find local grunt." when running "grunt" command

Examples related to npm-install

How to update core-js to core-js@3 dependency? Can not find module “@angular-devkit/build-angular” How do I deal with installing peer dependencies in Angular CLI? NPM Install Error:Unexpected end of JSON input while parsing near '...nt-webpack-plugin":"0' How to solve npm install throwing fsevents warning on non-MAC OS? Why does "npm install" rewrite package-lock.json? What is the difference between npm install and npm run build? How to solve npm error "npm ERR! code ELIFECYCLE" base 64 encode and decode a string in angular (2+) Install specific branch from github using Npm