1

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

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

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

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

即使在开发中，我也希望能够仅使用一个样式表引用来保留 HTML。这样做的最佳方法是什么？

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

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

1 回答 1

2

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

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"
    }
  }
}
于 2013-11-08T18:08:05.020 回答