How to minify HTML with CSS and Javascript?

Question

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 Javasc

Answer 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.

Answer 2

By using one of the many available minifiers.

There are even some that minify CSS.

Answer 3

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.

Answer 4

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