如何使用 CSS 和 Javascript 缩小 HTML？

我有一个 .html 文档，其中包含 CSS 和 Javascript（无外部文件）。有没有一些在线工具可以minify文档和Javascript 的占用空间非常小？我看到许多脚本有点不可读，其中所有变量和函数名称都被替换为单字母名称等。请指教。

编辑 2（2017 年 2 月 22 日）：现在，缩小资产（以及通过添加加载器和插件来实现更多功能）的最佳工具绝对是Webpack https://webpack.js.org.

移动所有配置的示例.css在一个文件中并缩小它：

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

编辑 1（2014 年 9 月 16 日）：更好的是，现在你有任务执行者 like Gulp http://gulpjs.com/ or Grunt http://gruntjs.com/.

任务运行程序是小型应用程序，用于自动化许多任务 你必须完成的耗时、无聊（但非常重要）的任务 在开发项目时做。其中包括诸如运行之类的任务 测试、连接文件、缩小和 CSS 预处理。经过 只需创建一个任务文件，您就可以指示任务运行程序 自动处理您可以处理的几乎所有开发任务 当您对文件进行更改时，请考虑一下。这是一个非常简单的想法 这将节省您大量时间并让您专注于 发展。

必读：Gulp.js 入门 http://markgoodyear.com/2014/01/getting-started-with-gulp/

使用 JavaScript 连接和缩小（和 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' }));
});

原始答案（2012年7月19日）：我建议HTML5 样板构建脚本 https://github.com/h5bp/ant-build-script这可以缩小你的 JS 和 CSS。