Grunt compresses HTML and CSS, and Grunt compresses HTMLCSS

Grunt compresses HTML and CSS, and Grunt compresses HTMLCSS
My friends! I posted an article before compressing the image. The Grunt compression cCSS is HTML! But I don't know why. Let's take a look again today. Fans are gone! No way. I have to write it once today, starting from scratch! First, let me explain why we need to use the build tool. Let me give an official answer:

One sentence: automation. for tasks that require repetition, such as compression, compilation, unit testing, and linting, automation tools can reduce your work and simplify your work.

Your work. When you have configured the task in the Gruntfile file, the task runner will automatically help you or your group complete most of the boring work.

Next let's get started:

Grunt and Grunt plug-ins are installed and managed through npm, and npm is Node. js Package Manager. therefore, to install Grunt, you must install Node. To install Grunt, you must install Node. To install Grunt, you must install it three times! Upper (lower> lower <lower) lower

You need to first install the Grunt command line (cli) to the global environment. During installation, you may need to use the sudo permission or run the following command as the administrator,

After the preceding command is executed, the Grunt command is added to your system path and can be executed in any directory.

Note: Installgrunt-cliIt does not mean Grunt is installed! The Grunt CLI task is simple: Call andGruntfileGrunt in the same directory. The benefit is that you can install Grunt of multiple versions on the same system at the same time.

In this way, Grunt of multiple versions can be installed on the same machine at the same time,

Similarly, the Grunt plug-in and other node modules can be installed in the same way. The following example shows how to install the htmlmin task module:

 

Another cssmin task module:

 

After all: Let's start coding:

Module. exports = function (grunt) {// 1. introduce grunt. loadNpmTasks ('grunt-contrib-cssmin'); grunt. loadNpmTasks ('grunt-contrib-htmlmin'); // 2. set task: grunt. initConfig ({// compression CSS cssmin: {yasuo: {options: {mangle: false}, expand: true, cwd: 'css ', // compress the file src :'*. css ', // compress the file dest: 'scss', put the compressed file folder ext: '.min.css', the name of the compressed file }}, // compress HTML htmlmin: {options: {removeComments: true, // remove annotation removeCommentsFromCDATA: true, // remove comment collapseWhitespace from character data: true, // useless space collapseBooleanAttributes: true, // failed Boolean attribute removeAttributeQuotes: true, // remove attribute quotation marks some attributes cannot be removed quotation marks removeRedundantAttributes: true, // remove unnecessary attribute useShortDoctype: true, // use the short heel element removeEmptyAttributes: true, // remove the empty attributes removeOptionalTags: true // remove optional additional tags}, yasuo: {expand: true, cwd: 'index', src :['*. html '], dest: 'yzml'}); // set the default task grunt. registerTask ('default', ['cssmin', 'htmlmin']);}

Then, Win + r calls up the command line.

Enter grunt and press ENTER

The result is successful !!

Do you understand?