Grunt Introductory instruction 6:grunt use steps and summary

What's grunt?

Very fire front-end automation gadget, task-based command-line build tool.

What can grunt do for us?

Suppose there is a scenario like this:

After the encoding is complete, you need to do the following work

1. HTML removal of an annotation, line break-htmlmin
2. CSS file compression merge –cssminify
3. JS Code style Check –jshint
4. JS Code Compression –uglyfy
5. Image compression-Imagemin

Repetitive and boring work is too much, we need an automated workflow, let us focus more on coding, rather than coding outside the tedious work. So Grunt was born. As you can imagine, if a single line of commands in the node environment takes care of all the work above, it saves a lot of time.

Grunt Installation Configuration Installation GRUNT-CLI

1. Self-owned node environment (>0.8.0), NPM package management

2. Uninstall the old version Grunt (<0.4.0) (Ignore it if not installed)

npm uninstall grunt -g


3. Installing GRUNT-CLI

npm install grunt-cli -g

Install Grunt-init (optional)

npm install grunt-init -g

Optional installation, Grunt-init is a scaffolding tool that can help you automate your project creation, including the project's directory structure, files in each directory, and more. It depends on how you run the template specified by Grunt-init, and how you answer questions during the creation process. Due to the complexity of the space and configuration of the Grunt-init template, this lesson will be discussed in detail in the next lesson.

Configure Grunt

Download the Package.json and gruntfile.js files from the official website to the project root directory and modify the configuration of the files.

• package.jsonRelated plug-ins that project automation relies on.
• Gruntfile.jsProject Automation workflow configuration file.

Basic content of the Package.json file:

Basic content of the Gruntfile.js file:

Applications in real-world projects

1. First configure the Package.json, gruntfile.js these two files, specific how to configure, please see the previous course explanation.

2. Execute the command to download the dependent grunt plugin automatically
Command line execution:
NPM Install
3. Start the task of live execution, this task you can use to monitor whether your source files are changed.
Command line execution:
Grunt Live
4. Start the task build execution, this task you can use to merge all the JS source files
Command line execution:
Grunt Build

Grunt Usage Summary

1. Simple configuration. Configuration file Gruntfile.js is the JS format, close to the front of the knowledge point. Relative to Ant and the like are Java-based, but also XML configuration, relatively low learning costs.
2. Grunt can do for us far more than so much, many grunt plug-ins for us to dig use.
For example: Haml less coffeescript Datauri Html2json
3. Each person's specific needs are different, can be configured according to their own habits, combined into the most suitable for their own project automation workflow.
4. The grunt team is hardworking, active, and interested in continuing to pay attention.


加油


Grunt Introductory instruction 6:grunt use steps and summary