Grunt compressing HTML and CSS

My little friends! I was clearly in the compressed picture before a post, about grunt compression CCSS is and HTML! But I don't know why, I'll see you today.. The fans are gone!no way. I had to write it today and start from the beginning!first of all, let me explain why you should use the build tool. Give me an official answer:

Bottom line: Automation is required for repetitive tasks, such as compression, compilation, and unit testing. Linting and so on, automation tools can ease your labor and simplify

Your job. When you are sure that the task is configured in the Gruntfile file, the task runner will automatically help you or your team to do most of the boring work.

Let's take a quick start:

The grunt and grunt plugins are installed and managed via NPM, and NPM is a node. js Package Manager. So that is, to install the grunt you have to install node, you want to install the grunt must install node, If you want to install grunt, you have to install node important things to say three times!? (? >?<?)?

You need to install the Grunt command Line (CLI) into the global environment first. You may need to use sudo permissions at installation or as an administrator to execute the following commands.

Once the above command has been executed, the grunt command is added to your system path and can be executed in any directory at a later time.

Note that installation grunt-cli is not equal to installing the grunt! The task of the Grunt CLI is simple: Calls Gruntfile are Grunt in the same directory. The benefit is that it allows you to install multiple versions of Grunt on the same system at the same time.

This allows multiple versions of the grunt to be installed on the same machine at the same time.

Similarly, grunt plug-ins and other node modules can be installed in the same way. The example shown below is the installation of the Htmlmin task module:

One more Cssmin task module:

When it's all done: Let's start knocking on the code:

Module.exports =function(grunt) {//1. IntroductionGrunt.loadnpmtasks (' Grunt-contrib-cssmin ');Grunt.loadnpmtasks (' Grunt-contrib-htmlmin '); //2. Set up tasks:Grunt.initconfig ({////Compression CSScssmin:{yasuo:{options:{mangle:false}, expand:true, CWD:' CSS ',//Compress files in that folder src:' *.css ',//compress that file dest:' Yscss ', put the compressed file folder ext:'. Min.css ' The name of the file after compression            }        },////Compress HTMLhtmlmin:{options: {removecomments:true,//Remove CommentsRemovecommentsfromcdata:true,//to remove comments from character dataCollapsewhitespace:true,//Useless spaceCollapsebooleanattributes:true,//Boolean property of FailureRemoveattributequotes:true,//Remove attribute quotes Some properties are not removable quotesRemoveredundantattributes:true,//Remove extra AttributesUseshortdoctype:true,//use a short heel elementRemoveemptyattributes:true,//Remove an empty propertyRemoveoptionaltags:true//Remove Optional additional tags}, yasuo:{expand:true, CWD:' Index ', src: [' *.html '], dest:' Yshtml '            }        }    }); //Set Default TasksGrunt.registertask (' Default ', [' cssmin ', ' htmlmin ']);}

The win+r then invokes the command line.

Enter Grunt Press ENTER

To see such a result, it succeeded!!

Do you understand me?

Grunt compressing HTML and CSS