Gossip and Grunt

1.5 No update is because of their own transfer, Android Framework+system to the front, you can imagine the process of bitter force, Bitter became a poem: very annoying/very annoying/very very annoying/special annoying/very annoying/annoying/annoying/AH ——。 Tired of adhering to the people ugly more reading adage, gnawing books countless, into notes refereed, not system. Often recall, always forget the majority, so to tidy up, such as before the excretion out to ruminant a few mouth, aftertaste a bit.

Collation naturally from near and far finishing, so the essay content should be from difficult to easy, selfish said, completely do not consider spectators.

Begin.

Recently looking at grunt, the simple point is a front-end management tool, such as Maven, Ant in Java. Before 1.5, I would say, "front-end engineering needs to be managed?" ", in the experience of the QA countless times" JS did not update, you ctrl+f5 refresh it ", the operation" and also compressed? I am a file compression very tired ", to PL" This folder is more than 100 files, no classification, but also a lot of refactoring after the abandoned ", I finally feel that the front end or need to manage.

What is grunt? is a plugin running on node, so to run grunt first to set up node environment.

What can grunt do? Merging, compressing, confusing, coding renaming, modifying references in HTML, even grammar detection, unit testing, and so on.

This is not a concept, the first global installation GRUNT-CLI

NPM install-g GRUNT-CLI

Now you can use the grunt command, but this is a metric, because the function of GRUNT-CLI is to invoke the Grunt module in the current directory without any function of its own. This means that the grunt is locally installed, so that different projects can use different versions of the grunt.

OK, now you want to create a new folder, enter and execute

NPM init    // Follow the instructions to generate Package.json, if you test grunt alone, this file is a missing npm install grunt--save-dev    //  Install and save dependencies to Package.json

Re-executing grunt will remind the Gruntfile.js file of the deletion, this is grunt all the behavior of the entrance, so to create a new Gruntfile.js file, the structure of this file is divided into 4 parts.

2. Wrapper
   

   function (Grunt) {  //  All the code is written here, note the incoming parameter grunt};

4. Task configuration

   Grunt.initconfig ({    concat: {},    cssmin: {},    uglify: {}});

6. Loading plugins

   Grunt.loadnpmtasks (' Grunt-contrib-concat ');  // the premise is to use NPM install Grunt-contrib-concat--save-devgrunt.loadnpmtasks (' grunt-contrib-cssmin '); Grunt.loadnpmtasks (' grunt-contrib-uglify ');

   This section can be replaced by Load-grunt-tasks and configured on the first line of wrapper

   Require (' Load-grunt-tasks ') (grunt);    // slower, also requires install

8. Custom tasks
   

   Grunt.registertask (' Default ', [' concat ', ' cssmin ', ' uglify ']);

   Default tasks are performed when executing grunt, and if this part is missing, you need to perform the tasks registered in part 2nd separately using the following command

   Grunt Concatgrunt Cssmingrunt uglify

The above is the introductory part of Grunt, the official website is relatively more detailed, the next one briefly describes the Gruntfile.js task in the configuration rules.

　　

Gossip and Grunt