css - 使用 r.js 连接 CSS

Question

我正在使用 require.js 开发一个元素，并计划使用 r.js 对其进行优化。 javascript 文件的优化作为自动要求配置的一部分内置。

我想要的是将 CSS 拆分成几个不同的文件，例如head.css、body.css、main.css 等。当 r.js 运行时，它应该将它们连接成一个文件。 HTML 将具有:

<link rel=stylesheet type=text/css href=css/main.css>

一个问题是在开发过程中，文件仍然会被拆分。我希望将它们分开，并且不想每次都重新进行优化——即使它可以自动完成。

即使在开发过程中，我也希望能够仅使用一个样式表引用来保留 HTML。执行此操作的最佳方法是什么？

我可以看到几种可能性，每种可能性都有潜在的问题:

1. 让 main.css 使用 @import 来包含所有其他 CSS 文件。
   • 不是自动的 -- 必须为每个文件编辑 main.css。这没什么大不了的，因为文件的数量相对较少，而且可能很早就知道了。
   • r.js 没有对此进行优化
2. 使用require-css
   • 这似乎更适合 AMD 加载 CSS——我宁愿预先加载所有 CSS
   • 自动加载 CSS 文件的问题与其他选项相同
3. 创建我自己的脚本，在没有 CSS 优化的情况下调用 r.js，连接所有 CSS 文件并适当缩小。
   • 我敢肯定有人比我做得更好

Answer 1

我使用 grunt-contrib-cssmin效果很好。您还可以将参数传递给 grunt，这样您就可以让 grunt:dist 组合所有的 css，而普通的 grunt 会将它们分开。

module.exports = function (grunt) {
  grunt.initConfig({
    cssmin: {
      add_banner: {
        options: {
          banner: '/* My minified css file */'
        },
        files: {
          'dist/css/dist.min.css': ["bower_components/bootstrap/dist/css/bootstrap.css", "tmp/css/dist.css"]
        }
      }
    }
  })
}

Grunt getting started.

还有一个requirejs script for grunt.设置如下所示:

requirejs: {
  compile: {
    options: {
      baseUrl: "path/to/base",
      mainConfigFile: "path/to/config.js",
      out: "path/to/optimized.js"
    }
  }
}