Grunt Installation Configuration Tutorial: Front-End automation workflow

Grunt, what's this stuff?

Grunt is a task-based JavaScript Project command-line build tool.

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

what can grunt do for us? Before you start, let's describe the following scenario: "Scenario 1: Before Project starts"

1. First build a Proja folder and then build the 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: Encoding"

The editor code = = Switch to the browser F5 + + editor encoding = = Switch to the browser F5 + + editor +/switch to the browser F5 + + editor encode + = switch to the browser F5 ....

"Scenario 3: Encoding Complete"

1. HTML minus comments, line breaks –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, repetitive and boring work too much .... the rope is so wasted.

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

Grunt Installation Configuration Installation GRUNT-CLI

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

   <CODE>NPM Uninstall grunt-g</code>

3. Installing GRUNT-CLI

   <CODE>NPM Install grunt-cli-g</code>

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 chapter is not open for discussion and interested children's shoes can be understood privately.

Configure Grunt

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

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

1. Package.json file modification official file address

2. gruntfile.js file modification official file address

Start an instance here, with Proja as an example, the following automation functions are implemented:

• The Proja directory is automatically monitored during encoding, and the browser is automatically refreshed if the. html/. css/. js file changes.
• After the encoding is complete, the HTML, CSS, JS, img files are compressed and stored in the dist/directory.
• The corresponding operation steps are as follows:
  1. First configuration of Package.json, gruntfile.js two files, proja file package download
  2. Execute the command automatically download the corresponding grunt plugin "video demo stamp Here"
     Command line execution:

     <CODE>NPM install</code>

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

     <code>grunt live</code>

  4. After the encoding is complete, build "video demo stamp Here"
     Command line execution:

     <code>grunt build</code>

  Grunt Usage Summary
  1. Simple configuration, configuration file Gruntfile.js is the JS format, closer to the front-end knowledge points. Relative to Ant and the like based on Java, but also the XML configuration, relatively low learning costs.
  2. Grunt can do for us far more than so much, a lot of 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 reasonable, combined into the most suitable for their own automated workflow.
  4. The grunt team is hardworking, active, and interested in continuing to pay attention.

Grunt Installation Configuration Tutorial: Front-End automation workflow