Grunt is based on Node.js and is developed in JS. This way, you can use Node.js to realize 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 that can be managed using NPM installation.
Therefore, the package.json project file generated by NPM can record the Grunt plug-in used in the current project, and Grunt will call the Gruntfile.js 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 package.json file.
Generate package.json file
npm has a requirement for the working directory. This requirement is: There is a package.json at the 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 gruntnpm install --save-dev plugin 1 plugin 2 plugin 3
At this time, there is some extra code in the package.json folder.
"devDependencies": { "grunt": "0.4.1"},Method 2 - Change package.json manually
"devDependencies": { "grunt": "~0.4.1", "grunt-contrib-cssmin": "~0.7.0" }Manually add this field in the package.json 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.
module.exports = function(grunt) { "use strict"; grunt.initConfig({ //Plugin Configuration Area}); //Load plugin tasks, add whoever you want to use grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTasks('grunt-contrib-imagemin'); //Register task grunt.registerTask('default', ['cssmin', 'imagemin', 'uglify']);};grunt.loadNpmTasks() is a loading plugin 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.
grunt.registerTask() is a registered 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
grunt.registerTask('custom', ['cssmin', 'imagemin']);When using it, enter:
grunt custom