javascript - 如何使用 CSS 和 Javascript 缩小 HTML？

Question

我有一个 .html 文件，里面有 CSS 和 Javascript(没有外部文件)。是否有一些在线工具可以缩小 文档和 Javascript 以达到非常小的占用空间？我看到很多脚本有点不可读，其中所有变量和函数名称都被替换为一个字母的名称等。请指教。

Answer 1

编辑 2(2017 年 2 月 22 日):现在缩小 Assets 的最佳工具(以及更多，通过添加加载器和插件)绝对是 Webpack .

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

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

---

编辑 1(2014 年 9 月 16 日):更好的是，现在您有了像 Gulp 这样的任务运行器或 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.

必读:Getting started with Gulp.js

使用 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 Boilerplate Build Script这可以缩小你的 JS 和 CSS。