Gulp-htmlmin can compress the HTML gulp plugin

Source: Internet
Author: User

Install Gulp-htmlmin with NPM with a single command:

NPM Install Gulp-htmlmin--save-dev

After installation, open the Gulpfile.js file, we write a task to specifically compress the HTML, and HTML for a series of processing:

var Gulp  = require (' gulp '), var htmlmin = require (' gulp-htmlmin '); Gulp.task (' HTML ', function () {     var options = { C2/>collapsewhitespace:true,        collapsebooleanattributes:true,        removecomments:true,        Removeemptyattributes:true,        removescripttypeattributes:true,        removestylelinktypeattributes:true,        Minifyjs:true,        minifycss:true        };    GULP.SRC (' app/**/*.html ')           . Pipe (Htmlmin (options))           . Pipe (Gulp.dest (' dest/'));    });

We see a set of options in the task that describe the role of their properties:

1.collapseWhitespace: From the literal meaning should be able to see, clear space, compressed HTML, this article is more important, the role is relatively large, resulting in a change in compression is particularly large;

2.collapseBooleanAttributes: Omit the value of Boolean attribute, for example: <input checked= "Checked"/>, then set this property, it will become <input checked/>;

3.removeComments: Clear the comments in the HTML section, we should reduce the HTML page comments.

4.removeEmptyAttributes: Clears all empty properties,

5.removeSciptTypeAttributes: Clears the type= "Text/javascript" attribute from all script tags.

6.removeStyleLinkTypeAttributes: Clear the Type attribute on all link tags.

7.minifyJS: Compresses JavaScript code in HTML.

8.minifyCSS: Compress the CSS code in the HTML.

In short, the principle of compressing HTML is to clear the useless code, delete the default value of the property, the HTML compression is minimal, so as to improve the performance of the project run.

This article references: HTTP://WWW.YDCSS.COM/ARCHIVES/20

Gulp-htmlmin can compress the HTML Gulp plugin

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.