使用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没有对此进行优化

​

1. 使用require-css
   • 这似乎更适合于CSS的AMD加载--我宁愿先加载所有的CSS。
   • 将CSS文件自动加载作为其他选项的相同问题

​

1. 创建我自己的脚本，在没有CSS优化的情况下调用r.js，连接所有的CSS文件并适当地缩小。
   • 我敢肯定会有人比我做得更好

​

Answer 1

我使用的是格朗特，它工作得很好。您也可以传递参数给咕噜，所以您可以让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"]
        }
      }
    }
  })
}

咕哝着开始。

还有一个要求脚本的咕噜。，其设置如下所示：

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