DEV Community

Thecodepedia
Thecodepedia

Posted on • Originally published at thecodepedia.com on

How to Make an HTML Minifier

(HTML Minifier) HTML minifier is the program that compresses HTML code by removing unnecessary characters without changing its functionality.

Sometimes people use the terms compress or minify interchangeably with HTML minification, but the latter term refers to removing all aspects of code that aren’t necessary for displaying the information to the user, not just compressing it.

Read about Making an Amazing Animated Button with HTML and CSS

How to Make an HTML Minifier

Adding HTML

To begin with, you’ll need to create some valid HTML for your page. The best way of doing that is through a tool like HTML5 Builder.

<!-- @code.priyank -->
<!-- Visit my website for more tutorials => www.thecodepedia.com -->
<!-- Making a HTML Minifier using Html, Css and JavaScript -->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Minify</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <section class="codeminify">
        <textarea class="simplecode"></textarea>
        <button id="htmlMinify"> Minify your code</button>
        <textarea class="minifycode"></textarea>
    </section>
    <script src="script.js"></script>
</body>

</html>
Enter fullscreen mode Exit fullscreen mode

Adding CSS

CSS is a language for describing text-based content and formatting. It can add basic stylings, such as font size and color, but it’s also able to format much more complex layouts. Some common uses of CSS include adding layout elements like columns or buttons, positioning items on a page (for example right-aligned), and creating hover effects (also known as active states) that display when you point your mouse at something. Adding CSS styles is easy—just type in a selector, followed by style information.

* {
  margin: 0;
  padding: 0;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100vw;
  background: #718093;
  overflow: hidden;
}
.codeminify {
  display: grid;
}
textarea {
  width: 400px;
  height: 200px;
  margin: 10px 0;
  border-radius: 5px;
  box-shadow: -8px 9px 16px 0px rgba(0, 0, 0, 0.85);
}
.simplecode {
  background: #e84118;
  color: white;
}
.minifycode {
  background: #e1b12c;
  color: black;
}
button {
  border-radius: 5px;
  padding: 10px;
  margin: 0 98px;
  color: white;
  background: black;
  box-shadow: -8px 9px 16px 0px rgba(0, 0, 0, 0.85);
}

Enter fullscreen mode Exit fullscreen mode

Adding JavaScript

Having an HTML minifier is good, but having one that’s compatible with JavaScript isn’t just better, it can actually be life-changing. Many developers (myself included) have had their fair share of headaches caused by browsers not understanding minified code, so we’re understandably eager to use a tool that’ll strip away unnecessary characters and make our JavaScript code more presentable. Luckily for us, such a tool exists; it’s called UglifyJS2. Let’s take a quick look at how to set up our HTML minifier with it.


    var $tag = function (tag) {
            return document.getElementsByTagName(tag)
        }
    function minify_html(type, input, output) {
        output.value = input.value
            .replace(/\<\!--\s*?[^\s?[][\s\S]*?--\>/g, '')
            .replace(/\>\s*\</g, '><');
        }
    document.getElementById("htmlMinify").addEventListener("click", function () {
        minify_html(
            this.innerHTML, $tag('textarea')[0], $tag('textarea')[1]
        );
        }, false)

Enter fullscreen mode Exit fullscreen mode

Run-on browser

Load and parse your source code, then search for common characters. After completing these steps open index.html file through live server vs code extension.

Conclusion

In this way, you can make an amazing HTML minifier. If you find this helpful then please share it with your friends. If you have any doubt please contact me or comment. You can download the code from my GitHubaccount.

Discussion (0)