Grunt is based on , developed in JS, so that you can use the help of cross-system and cross-platform desktop operations, such as file operations, etc. In addition, Grunt and its plug-ins are all used as a package and can be managed using NPM installation.
Therefore, the project file generated by NPM can record the Grunt plug-in used in the current project, and Grunt will call this file, parse the tasks (tasks) and perform corresponding operations.
Install Grunt-cli
In fact, it is to install Grunt-cli, where Grunt's command line interface (CLI) is installed. After that, the grunt command will be recognized in the command prompt. Installing grunt-cli is not called installing grunt. This is because Grunt itself is not used globally. If you want to use Grunt, you need to install Grunt once for any specific working directory. This is also because different working directories require different automation work through Grunt, so it needs to be configured independently.
npm install -g grunt-cli
—save-dev parameter, indicating that the newly installed thing will be added to the file.
Generate file
npm has a requirement for the working directory. This requirement is: There is a root directory location:
document. This file defines some project information (name, description) corresponding to the working directory, as well as the dependencies of the package (that is, the npm module).
Execute the following command to initialize
npm init
Install Grunt and required plugins for the current working directory
Method 1
We installed Grunt in the global directory before, and now we need to introduce it to the current project path. At the same time, the required plugins may include these:
Merge files: grunt-contrib-concat
Syntax check: grunt-contrib-jshint
Scss compiled: grunt-contrib-sass
Compressed file: grunt-contrib-uglify
Listen to file changes: grunt-contrib-watch
Create a local server: grunt-contrib-connect
The way they can be installed is:
npm install --save-dev grunt npm install --save-dev Plugin1 Plugin2 Plugin3
At this time, there is some extra code in the folder.
"devDependencies": {
"grunt": "0.4.1"
},
Method 2 - Change manually
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-cssmin": "~0.7.0"
}
Manually add this field to the file and add the packages that need to be depended on. If you only need to install the latest version, you can change it to * and then execute npm install. You will find that there is a node_modules folder in the folder, which stores the plug-ins we need.
Configuration
Generally speaking, use templates directly as configuration files.
= function(grunt) {
"use strict";
({
//Plugin configuration area });
//Load plug-in tasks and add whoever you want to use ('grunt-contrib-uglify');
('grunt-contrib-cssmin');
('grunt-contrib-imagemin');
// Register a task ('default', ['cssmin', 'imagemin', 'uglify']);
};
() is a plug-in task. In fact, if you want to use the function of which plugin, please use this code to add the plugin task in this part.
() is a registration task, and there is a default by default. The default means that when you use it last, you can directly enter grunt in the command prompt in the directory to execute the registered task, which is equivalent to executing the default task.
Using custom tasks
More task commands can be registered and other names can be used. for example
('custom', ['cssmin', 'imagemin']);
When using it, enter:
grunt custom