How to minify HTML with CSS and Javascript? [close

问题:

I have a .html document with CSS and Javascript inside of document (no external files). Is there some online tool that would minify document and Javascript to some very small footprint? I saw many scripts kind of unreadable, where all variables and function names are replaced with one-letter names, etc. Please advice.

回答1:

Edit 2 (Feb 22, 2017): Now the best tool to minify your assets (and a whole lot more, by adding loaders and plugins) is definitely Webpack.

Example of config to move all your .css in one file and minify it:

{
  test: /\.css$/,
  use: [
    {
      loader: 'css-loader',
      options: {
        minimize: true
      }
    }
  ]
}

---

Edit 1 (Sept 16, 2014): Even better, now you have task runners like Gulp or Grunt.

Task runners are small applications that are used to automate many of the time consuming, boring (but very important) tasks that you have to do while developing a project. These include tasks such as running tests, concatenating files, minification, and CSS preprocessing. By simply creating a task file, you can instruct the task runner to automatically take care of just about any development task you can think of as you make changes to your files. It’s a very simple idea that will save you a lot of time and allow you to stay focused on development.

Must read: Getting started with Gulp.js

Example of task with JavaScript concatenation and minification (and JSHint):

gulp.task('scripts', function() {
  return gulp.src('src/scripts/**/*.js')
    .pipe(jshint('.jshintrc'))
    .pipe(jshint.reporter('default'))
    .pipe(concat('main.js'))
    .pipe(gulp.dest('dist/assets/js'))
    .pipe(rename({suffix: '.min'}))
    .pipe(uglify())
    .pipe(gulp.dest('dist/assets/js'))
    .pipe(notify({ message: 'Scripts task complete' }));
});

---

Original answer (Jul 19, 2012): I advise the HTML5 Boilerplate Build Script which can minify your JS and CSS.

回答2:

Good javascript compressor is also Google's Closure Compiler and vice versa, to make compressed code a bit better readible you can use Javascript Beautifier. You can also have a look at phpEasyMin project.

回答3:

Closure compiler has been correctly recommended for JS; but not many are aware of Google's Closure stylesheets. One of the closure stylesheets features is renaming, where

<style>
  .descriptive-parent-class-name .descriptive-element-class-name {color:red;}
</style>
<div class="descriptive-parent-class-name">
  <p class="descriptive-element-class-name">Lorem ipsum</p>
  <p class="descriptive-element-class-name">Lorem ipsum</p>
</div>

would become

<style>
  .a-b .a-c {color:red;}
</style>
<div class="a-b">
  <p class="a-c">Lorem ipsum</p>
  <p class="a-c">Lorem ipsum</p>
</div>

There'll be further minification too; and given the fact that OP indicates all resources are included into the html, this may end up saving quite a bit in traffic overhead.

NB: if you inspect any Google search results page, you'll see their class and ID names are almost never longer than 4 random characters

回答4:

By using one of the many available minifiers.

There are even some that minify CSS.

回答5:

I am afraid you'll have to do it in two steps:

1. manual search and replace of global objects in a text editor
2. minifiers to finish the job on css and js

I had a similar question some time ago (about global objects and object keys). The answer I got was that no tool will make assumptions about the global context. In your example, they won't minify "pageLoad" because it might be used by another html or js fragment you didn't provide.

A workaround in your example would be to make the pageLoad function local and add the onload event dynamically in the script:

elt.onload=function(){pageLoad();};

回答6:

While JavaScript code can be compressed and decompressed within JavaScript (see other answers), it's actually hard to achieve the same result in CSS. There is currently no tool that will do more than remove unnecessary whitespace (see also Are there any agressive CSS Minification tools?), since identifier and class names cannot be changed without destroying the link between HTML and CSS.

Also, you can't remove anything from HTML markup except whitespace. Well, you could minify the class names and identifier, but there's currently no tool that will update those minified values in your CSS/JS files, so this would render your website ugly and broken. And even empty elements are often needed in order to get some CSS effects right (yes, I'm looking at you, IE6). This applies to JavaScript function names too.

TL;DR: Unfortunately there's no all-in-one-minify-everything tool. The closest thing is htmlcompressor.

回答7:

Try http://prettydiff.com/. It offers automatic language detection and can minify html, css, and javascript. This tool presumes that script tags without a mime type or with a javascript relevant mime type must contain either javascript or nothing. Likewise, style tags without a mime type or with the "text/css" mime type are presumed to contain CSS. The CSS and JavaScript are minified accordingly. The tool itself is written in javascript. There is no reason you should have to use more than one tool.

回答8:

Have never tried it but have heard real good reviews of Google's Closure compiler..You may want to try it out

回答9:

I recommend you to try WebMarkupMin Online.

The WebMarkupMin Online a free online tools to minify your HTML, XHTML and XML code. HTML and XHTML minifiers supports the minification of CSS code from style tags and attributes, and minification of JavaScript code from script tags, event attributes and hyperlinks with javascript: pseudo-protocol. These minifiers supports multiple algorithms of CSS minification (Mads Kristensen's Efficient stylesheet minifier, Microsoft Ajax CSS Minifier and YUI CSS Compressor) and JavaScript minification (Douglas Crockford's JSMin, Microsoft Ajax JS Minifier and YUI JS Compressor).

These tools is based on WebMarkupMin library.