Grunt Installation Configuration Tutorial: Front-End Automation Workflows

Article Introduction: Grunt to build a front-end automation workflow.

Grunt, what's this stuff?

Recently very hot front-end automation gadgets, task-based command-line build tools http://gruntjs.com

What can grunt do for us?

Before you start, let's describe the following scenario:

"Scenario 1: Before the project starts"

1. First set up a Proja folder and then build HTML CSS JS images (build 5 or more folders, spend 1 minutes)
2. Copy CSS library (Yui Reset bootstrap) JS library (requiet.js seajs jquery jquery plugin) into the corresponding directory (copy n files, spend n minutes)
3. Then new html/index.html js/comm.js css/base.css css/comm.css css/module-a.css ... (Build n files, spend n minutes)

"Scenario 2: Coding"

Editor encoding => switch to browser F5 => editor encoding => switch to browser F5 => editor encoding => switch to browser F5 => editor encoding => switch to browser F5 ....

The keyboard is so cup ....

"Scenario 3: Coding Complete"

1. HTML remove 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

In the process of a project, there are too many repetitive and boring jobs .... the rope was so wasted.

We need an automated workflow that allows us to focus on coding rather than coding the tedious work. So Grunt was born. Imagine, if in a node environment, a line of command to take care of a scene, so cool ...

Grunt Installation Configuration

Install GRUNT-CLI

1. 1. Self-owned node environment (>0.8.0), NPM package management
2. 2. Uninstall old version Grunt (<0.4.0) (not installed please ignore)

   NPM Uninstall grunt-g

3. Install GRUNT-CLI

   NPM Install grunt-cli-g

Install Grunt-init (optional)

npm install grunt-init -g

Optional installation, Grunt-init is a scaffold tool, it can help you complete the project Automation creation, including the project directory structure, each directory files and so on. It depends on how you run the Grunt-init specified template, and how you answer the questions during the creation process. Because of the complexity of space and configuration of Grunt-init templates, this chapter is not open for discussion, interested in children's shoes can be privately understood.

Configure Grunt

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

• package.jsonThe related Plug-ins that project automation relies on.
• Gruntfile.jsProject Automation workflow configuration file, important

1. Package.json Document modification Official document address

2. Gruntfile.js Document modification Official document address

start an instance

Here, for example, Proja, the following automation functions are implemented:

• Automatically monitor the Proja directory during encoding, and automatically refresh the browser if the. html/. css/. js file changes.
• After encoding is complete, compress HTML, CSS, JS, img files, and store them in the dist/directory.

The corresponding procedure is as follows:

1. First configure Package.json, gruntfile.js two files, proja file package download
2. Execute the command automatically download the corresponding grunt plugin "video demo poke Here"
   command line execution:

   NPM install

3. Start File Change monitoring (Livereload) "Video demo stamp Here"
   command line execution:

   grunt live

4. Build "video demo stamp Here" after encoding is complete
   command line execution:

   grunt build

Summary of the use of grunt

1. Configuration is simple, configuration file gruntfile.js is JS format, more close to the front-end knowledge points. Based on Java and XML configuration relative to ant, the cost of learning is relatively low.
2. Grunt can do for us far more than so much, a lot of grunt plug-ins to use for us to dig.
   For example: Haml less coffeescript Datauri Html2json
3. Each person's specific needs are different, can according to their own habits reasonable configuration, combined into the most suitable for their automated workflow.
4. Grunt Team is hard-working, community active, interested to continue to pay attention to.