Grunt JS Build environment construction and use getting Started

Grunt JS build environment and use Getting Started 1. Application Scenarios

An automated task processing tool that automates execution of everyday requirements (code rule checking, code merging), and only retains Package.json and gruntfile.js to rely on a line of code to download.

2. Build steps

Grunt relies on node. js so make sure you have node. js installed before installing, and then start installing Grunt.

2.1 Installing node. js

Enter Nodejs official website https://nodejs.org/en/download/, according to the current model to select the corresponding version after downloading the installation, open the CMD command line tool input command as an administrator, then complete the configuration of the Nodejs:

NPM Config set registry=http://registry.npm.taobao.org

2.2 Installing Grunt

In fact, the installation is not Grunt, but GRUNT-CLI, which is the Grunt of the command line, so you can use the Grunt command to execute a task defined in Gruntfile.js in a project. Note, however, that GRUNT-CLI is just a command-line tool to execute, not Grunt the tool itself.

Installing GRUNT-CLI requires NPM, using the following line to install GRUNT-CLI at the global scope, in other words, you can execute Grunt commands from anywhere:

NPM install-g GRUNT-CLI

Note: Because using the-G command will be installed to the global, may involve the system sensitive directory, if using Windows, you may need to use administrator privileges, if you use OS X/linux, you may need to add the sudo command.

2.3 Generating Package.json files

The Package.json file is actually node. js to describe a project file in JSON format. Generating this file is super simple and it is recommended to generate it interactively with the command line.

Open the command line, the CD project folder directory below, enter the instruction NPM init, will come out a lot of information, and then start to fill in the project name, fill in and then enter.

2.4 Plugins required for installation

Plug-ins for the most current needs

Grammar checker: Grunt-contrib-jshint

Monitor file changes: Grunt-contrib-watch

R.js plug-in: Grunt-contrib-requirejs

Command-line Syntax:

NPM Install < plugin name >--save-dev

For example, install the syntax Checker plugin:

NPM Install Grunt-contrib-jshint--save-dev

Indicates that grunt is installed through NPM to the current project with the-save-dev parameter added to the Package.json file for the newly installed items.

After running the command line, the project directory will have more than one Node_modules folder, which holds the dependent packages downloaded from the command line.

Note Grunt-contrib-watch is the key to automating the execution of tasks.

2.5 Configuring the Gruntfile.js syntax

The configuration code is wrapped in

Module.exports = function (grunt) {    ...};

Inside, the internal writing mainly has three pieces of code: Task Configuration Code, plug-in loading code, task registration code.

2.5.6 Task Configuration Code

For example, the following code:

  Grunt.initconfig ({    Pkg:grunt.file.readJSON (' Package.json '),    uglify: {      options: {        banner: '/*! < %= pkg.name%> <%= grunt.template.today ("Yyyy-mm-dd")%> */\n '      },      build: {        src: ' src/<%= Pkg.name%>.js ',        dest: ' build/<%= pkg.name%>.min.js '}}  );

The task configuration code is placed in the object format in the Grunt.initconfig function, which first wrote a sentence Pkg:grunt.file.readJSON (' Package.json ') function is to read Package.json file, And the information inside to get out, easy to use in the later task (for example, the following <%= pkg.name%> to output the project name), this can improve flexibility. After that is the Uglify object, the name is fixed, indicating that the following task is called the Uglify plug-in, first configure some of the global options and then create a new build task.

2.5.7 Plugin Loading code

Since the above task requires grunt-contrib-uglify, when grunt-contrib-uglify is installed into our project, write down the following code to load:

Grunt.loadnpmtasks (' grunt-contrib-uglify ');

2.5.8 Task Registration Code

Sign up for tasks and use

Grunt.registertask (' Default ', [' uglify ']);

It means that a uglify task is registered on default, and default is the alias, which is the defaults task, and when you execute grunt in the project directory, it performs the tasks that are registered to default.

When we execute the grunt command, all the code for Uglify will be executed. We can also register other tasks, such as:

Grunt.registertask (' Compress ', [' uglify:build ']);

If we want to execute this task, we can't just enter the grunt command, we need to enter the Grunt compress command to execute the task, and the mission is to uglify the build task below, that is, we will only execute uglify inside Build defines the task, and does not perform other tasks defined within the uglify.

It is important to note that the name of a task cannot be named after the task configuration, meaning that the compress cannot be named Uglify, which will result in an error or an unexpected situation.

After the basic configuration is complete, the watch is configured to listen for file changes, and when the file changes (we write the Save), automating certain tasks, this will enable the Automation task to save the continuous Input grunt command work.

Full Configuration code:

Module.exports = function (grunt) {  grunt.initconfig ({    Pkg:grunt.file.readJSON (' Package.json '),    Watch: {      scripts: {        files: [' src/**/*.js ', ' src/*.js '],        tasks: [' uglify '],        options: {          spawn:false,        }      }    ,    uglify: {      options: {        banner: '/*! <%= pkg.name%> <%= Grunt.template.today ("Yyyy-mm-dd")%> */\n '      },      build: {        src: ' src/<%= pkg.name%>.js ',        Dest: ' build/<%= pkg.name%>.min.js '}}  );  Grunt.loadnpmtasks (' grunt-contrib-uglify ');  Grunt.loadnpmtasks (' Grunt-contrib-watch ');  Grunt.registertask (' Default ', [' Watch ']);

　　

Grunt JS Build environment construction and use getting Started