0

I've been looking for tools that minify HTML, CSS and JS together. With that being said, I don't mean just whitespace and comment removal, but also shortening of selectors.

For example

<div class="wrapper">
    <div class="sub-header"></div>
</div>

to:

<div class="eD"><div class="qw"></div></div>

But haven't found any. And that is sort of backed up by the fact viewing source of popular sites like GitHub, Reddit and even Facebook reveals full class names like "main-container" etc.

So is there any tool that does what I want?

| improve this question | |
  • You'd have to have a single suite of tools that could be best-in-class for minimization of HTML, CSS and JS. And, the JS part would be a little tricky because if class names are ever constructed with string operations, it would be non-trivial to make sure you got those without any false positives. Plus, in most cases, the actual bandwidth usage of a page is dominated by a few images, not by the HTML source of the page. – jfriend00 Jul 7 '16 at 2:55
  • 1
    There's also the potential readability issue. If (in the worst case) we run into a situation where the only existing copy of your code is the deployed one, and you've deliberately mangled it, it's going to make it pretty hard to work with. On the other hand, doing this might provide some (very) slight obfuscation, I guess. – Mathieu K. Jul 7 '16 at 3:21
  • If your development processes lose the master copy and all you have left is the deployed version, you have lots worse troubles than a web page that is hard to understand. People used deployed object code all the time and somehow manage (usually) to hang onto the source. – Ira Baxter Jul 7 '16 at 3:22
1

If you are still looking for a tool that handles that stuff. There is a project called "rename-css-selectors" if you are handle the code with node:

https://www.npmjs.com/package/rename-css-selectors

There is also a Gruntplugin for it:

https://www.npmjs.com/package/grunt-rcs

This will minify all CSS selectors in HTML, JS and CSS files (actually any file you want). I saved 20ish% of the CSS filesize at the end. Soon will be a Gulpplugin released.

EDIT:

The answer above is just the half. To fully answer your question you can combine different tools. In addition to the rename css selectors you can use the HTML minifier from kangax. With that you save 30ish% on HTML files:

https://github.com/kangax/html-minifier

There is also a Gruntplugin for it:

https://github.com/gruntjs/grunt-contrib-htmlmin

Or even gulp:

https://www.npmjs.com/package/gulp-htmlmin

So in total, there is no tool which handles everything in one shot. But combining different tools/packages will do it for you.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.