Introduction to installing GRUNTJS methods in Windows Server

I'm going to install Grunt.js v0.4.1. Warning: If you have installed the Grunt.js 0.3.x or lower version, please uninstall it first.

Grunt command-line interface
In order to install grunt.js, we need to install the Global Grunt Command line Interface (CLI), the current version of CLI is 1.0.6. Open the Windows Command Window (CMD) and enter the following directive:

The code is as follows	Copy Code
NPM Install Grunt-cli-g

This instruction adds grunt to your system environment variable, 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 return

2. Hold down the Shift key and right-click in the folder space, and select "Open Command Window Here"

Create folders and Package.json
Now we need to install the grunt.js. To enter the project folder at the command prompt, I like to put the compiled file in a folder called _build, so the path to this example is "C:/users/codebelt/desktop/first-grunt-project/_build".

There are several ways to install Grunt.js and plug-ins, but I'll share one of the easiest ways I think. We need to create a new Package.json file, put it in the _build folder, copy and paste the following code into the 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" } }

When the following code is run, the grunt v0.4.1 and grunt Plug-ins concat v0.1.3 are installed into the _build folder.

The order is as follows:

NPM Install build Grunt file
Now the 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 into the _build folder, and then paste the following code into 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 content, you can find me in the. The/src/scripts directory creates a new fileone.js and filetwo.js two files. This Gruntjs script will merge the two files into the. The app.js under the/deploy/scripts folder. I define my folder path as a constant or as the underlying path. This way I can only modify the underlying path in one place instead of modifying all the paths in the Gruntfile.

Now, enter grunt at the command prompt, and the next is the moment to witness miracles.

Grunt it will run the Default task, that is, merge two JS files into a file. Try it, hope it works for you. You should be able to see the output from the command prompt:

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

######### translation complete Split line #########

Grunt is a good thing, to engage in front-end development of the students are necessary to learn to use such tools to facilitate the management of their own development.