Minifying html and CSS onto a single line in Node.js

Question

Is there a module or gulp option which can minify html and css into a single line?

For example

<style media='screen' type='text/css'>
    .text {
        padding: 1px 1px 1px 1px;
        font-size: 12px;
    }
</style>

<!-- now for html -->

<div style='width:550px;' >
    <div style='float:left;font-size:1.2em;' class='text'>
        Title goes here
    </div>
    <div style='width:60px;float:left;' class='text'>
        <span style='font-size:0.8em;'>
            ®
        </span>
    </div>
    <div style='float:left' class='text'>
        Some paragraph text
    </div>
    <div style='float:left;padding-top:10px;' class='text'>
        <span style='font-style:italic;'>
            A footer to the paragraph
        </span>
    </div>
</div>

Can the above me minified onto a single line using node.js so it looks like the below.

<style media='screen' type='text/css'>.text {padding: 1px 1px 1px 1px;font-size:12px;}</style><!-- now for html --><div style='width:550px;' >  <div style='float:left;font-size:1.2em;' class='text'>MY BRILLIANCE</div><div style='width:60px;float:left;' class='text'>      <span style='font-size:0.8em;'>®</span> </div>  <div style='float:left' class='text'>       With release comes growth, through challenge comes wisdom, let us show you the way. </div>  <div style='float:left;padding-top:10px;' class='text'><span style='font-style:italic;'>Absolute Equal Acceptance through Thought, Conscience and Reunion.</span></div></div>

Just a word of warning: this will probably not give you any boost in terms of performance/compression, but maybe that's not why you do it ... — oligofren
– oligofren, Commented Jun 14, 2019 at 12:52

Aritra Chakraborty · Accepted Answer · 2019-06-14 12:49:10Z

1

There is a very popular package called html-minifier.

A minimal example from the site:

var minify = require('html-minifier').minify;
var result = minify('<p title="blah" id="moo">foo</p>', {
  removeAttributeQuotes: true
});
result; // '<p title=blah id=moo>foo</p>'

answered Jun 14, 2019 at 12:49

Aritra Chakraborty

12.6k3 gold badges30 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

10101010 · Accepted Answer · 2019-06-29 05:23:59Z

var minify = require("html-minifier").minify;

var html = `<style media='screen' type='text/css'>
.text {
    padding: 1px 1px 1px 1px;
    font-size: 12px;
}
</style>

<!-- now for html -->

<div style='width:550px;' >
<div style='float:left;font-size:1.2em;' class='text'>
    Title goes here
</div>
<div style='width:60px;float:left;' class='text'>
    <span style='font-size:0.8em;'>
        ®
    </span>
</div>
<div style='float:left' class='text'>
    Some paragraph text
</div>
<div style='float:left;padding-top:10px;' class='text'>
    <span style='font-style:italic;'>
        A footer to the paragraph
    </span>
</div>
</div>`;

var result = minify(html, {
  collapseWhitespace: true,
  minifyCSS: true,
  quoteCharacter: "'"
});

console.log(result);

Output

<style media='screen' type='text/css'>.text{padding:1px 1px 1px 1px;font-size:12px}</style><!-- now for html --><div style='width:550px'><div style='float:left;font-size:1.2em' class='text'>Title goes here</div><div style='width:60px;float:left' class='text'><span style='font-size:.8em'>®</span></div><div style='float:left' class='text'>Some paragraph text</div><div style='float:left;padding-top:10px' class='text'><span style='font-style:italic'>A footer to the paragraph</span></div></div>

Ritambhar Das · Accepted Answer · 2019-06-14 13:06:21Z

0

Try to keep HTML files and CSS files separately. And learn SASS. After learning SASS you would be like, "Why I am using CSS". With SASS you will be able to minify CSS. Go to https://sass-lang.com/install and download "Prepros". There is also a free version available, just download and install it.

answered Jun 14, 2019 at 13:06

Ritambhar Das

771 silver badge5 bronze badges

1 Comment

user6248190 Over a year ago

I just need to do this for a little tool I am building

Collectives™ on Stack Overflow

Minifying html and CSS onto a single line in Node.js

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related