Installation and configuration tutorial of Node. js's project construction tool Grunt, node. jsgrunt

Installation and configuration tutorial of Node. js's project construction tool Grunt, node. jsgrunt

Grunt is developed based on Node. js and uses JS to implement cross-system cross-platform desktop operations, such as file operations. In addition, Grunt and its plug-ins are all used as a package and can be managed through NPM installation.
Therefore, the package generated by NPM. json project file, which can record the Grunt plug-in used in the current project, and Grunt will call Gruntfile. js file, parse the tasks in it and execute corresponding operations.

Install Grunt-cli
In fact, Grunt-cli is installed. The command line interface (CLI) of Grunt is installed here. After that, the command prompt will recognize the grunt command. The installation of grunt-cli cannot be called the installation of Grunt. This is because Grunt is not used globally. If you want to use Grunt in any specific working directory, you need to install Grunt once. This is also because different working directories require different automated work through Grunt, so independent configuration is required.

npm install -g grunt-cli

-The save-dev parameter indicates that the newly installed package will be added to the package. json file.

Generate the package. json File
Npm has a requirement on the working directory. This requirement is: the root directory has a package. json
File. This file defines some project information (name, description) corresponding to the working directory and the dependencies between packages (that is, the npm module.
Execute the following command to initialize

npm init

Install Grunt and required plug-ins for the current working directory
Method 1
Previously, we installed Grunt in the global directory, and now we need to introduce it to the current project path. At the same time, the required plug-ins may include:

Merge file: grunt-contrib-concat
Syntax check: grunt-contrib-jshint
Scss Compilation: grunt-contrib-sass
Compressed file: grunt-contrib-uglify
Listener file changes: grunt-contrib-watch
Create a local server: grunt-contrib-connect
You can install them in the following ways:

Npm install -- save-dev gruntnpm install -- save-dev plug-in 1 plug-in 2 plug-in 3

In this case, the package. json folder contains more code.

"devDependencies": { "grunt": "0.4.1"},

Method 2-manually change package. json

"devDependencies": {　　"grunt": "~0.4.1",　　"grunt-contrib-cssmin": "~0.7.0"　}

Manually in package. add this field to the json file and add the dependent package. If you only need to install the latest version, you can change it to * and run npm install. The node_modules folder is added to the folder, it stores the plug-ins we need.

Configuration
Generally, templates are directly used as configuration files.

Module. exports = function (grunt) {"use strict"; grunt. initConfig ({// plug-in configuration area}); // load the plug-in task and add grunt to anyone who wants to use it. loadNpmTasks ('grunt-contrib-uglify '); grunt. loadNpmTasks ('grunt-contrib-cssmin'); grunt. loadNpmTasks ('grunt-contrib-imagemin'); // register the task grunt. registerTask ('default', ['cssmin', 'imagemin', 'uglify ']);};

Grunt. loadNpmTasks () is a plug-in loading task. In fact, if you want to use the plug-in function, please use this code to add the plug-in task.
Grunt. registerTask () is a registration task, which has a default value by default. By default, you can directly enter grunt in the command prompt of the directory to execute the registration task, which is equivalent to executing the default task.

Use custom tasks
You can register more task commands and use other names. For example

grunt.registerTask('custom', ['cssmin', 'imagemin']);

Enter:

grunt custom