How to install GruntJS on Windows Server

This article introduces how to install GruntJS on a Windows server, but we must note that you need to install Node. js before installing Grunt. js. For this tutorial, I have installed node. js v0.10.0. I hope this article will help you.

I will install Grunt. js v0.4.1. Warning If you have installed Grunt. js 0.3.x or a lower version, uninstall it first.

Grunt command line interface
To install grunt. js, We need to install the global Grunt command line interface (CLI). The current CLI version is 1.0.6. Open the Windows command window (CMD) and enter the following command:

The Code is as follows:	Copy code
Npm install grunt-cli-g

This command will add grunt to your system environment variables, and then you can run grunt in any directory.

Windows tips-open a command prompt in a folder

1. Enter "CMD" in the address bar and press Enter.

2. Press Shift and right-click the blank folder and select "Open command window here"

Create a folder and package. json
Now we need to install Grunt. js. Enter the project folder in the command prompt. I like to put the compilation file in a folder named _ build. Therefore, the path of this example is "C: /Users/codebelt/Desktop/first-grunt-project/_ build ".

There are several ways to install Grunt. js and plug-ins, but I will share one of the simplest methods I think. Create a new package. json file, put it in the _ build folder, copy and paste the following code into package. json.

The Code is as follows:	Copy code
{ "Name": "Test-Project ", "Version": "0.1.0 ", "DevDependencies ":{ "Grunt ":"~ 0.4.1 ", "Grunt-contrib-concat ":"~ 0.1.3" } }

After the current code is run, grunt v0.4.1 and grunt plugin concat v0.1.3 are installed in the _ build folder.

The command is as follows:

Npm install create a Grunt File
Now Grunt. js and Concat plug-ins should have been installed. Now we need to add a Grunt file to configure and compile our project. Create a new Gruntfile. js file to the _ build folder, and paste the following code to Gruntfile. js.

The Code is as follows:

Copy code

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 have read the above code, you can find that the fileone. js and filetwo. js files are created under the./src/scripts directory. The GruntJS script combines the two files and exports them to app. js in the./deploy/scripts folder. I define my folder path as a constant or basic path. In this way, I can modify the basic path in only one place, instead of modifying all the paths in Gruntfile.

Now, enter grunt in the command prompt, and the next step is to witness the miracle.

Grunt runs the Default task, that is, merge two js files into one file. Try it. I hope it will be useful to you. You can see the output in the command prompt:

The Code is as follows:	Copy code
Running "concat: dist" (concat) task File "../deploy/scripts/app. js" created.   Done, without errors.

######## Dividing line after translation completion #########

Grunt is a good thing. It is necessary for students engaged in front-end development to learn to use such tools to facilitate management of their own development.