使用 r.js 连接 CSS

Question

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

我想要的是将CSS拆分为几个不同的文件，例如 head.css、body.css、main.css等 当 are.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 的 requirejs 脚本。设置如下所示：

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