Installing Gruntjs under Windows

You need to install node. js before you install Grunt.js. For this tutorial, I've installed the node. JS v0.10.0.

I'm going to install grunt.js v0.4.1. Warning: If you have installed Grunt.js 0.3.x or a 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 CLI version is 1.0.6. Open the Windows Command Window (CMD) and enter the following directives:

NPM Install Grunt-cli-g

This command 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. Type "CMD" in the Address bar and enter

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

Creating folders and Package.json

Now we need to install the grunt.js. From the command prompt into the project folder, I like to put the compilation 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 plugins, 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 Package.json.

{    "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 plugins concat v0.1.3 are installed into the _build folder.

The command is as follows:

NPM Install

Create a Grunt file

Now the grunt.js and Concat plugins should already be installed. Now we need to add a new 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.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

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. New Fileone.js and filetwo.js two files were created under the/src/scripts directory. This Gruntjs script will merge the two files into the. App.js under the/deploy/scripts folder. I use <%= meta.srcpath%> as a constant or base path to define my folder path. This way I can modify the base path only in one place, without having to modify all the paths in the Gruntfile.

Now, enter grunt at the command prompt, and the next is the time to witness the miracle.

?

1

grunt

It runs the Default task, which is to combine two JS files into a single file. Try it, hope it works for you. You should be able to see the output from the command prompt:

?

1 2 3 4

Running "concat:dist" (concat) task File "../deploy/scripts/app.js" created.  Done, without errors.

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