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。这样做的最佳方式是什么？

我可以看到几种可能存在的问题：

让main.css使用@import包含所有其他CSS文件。
- 非自动 - 必须为每个文件编辑main.css。这不是什么大问题，因为文件数量相对较少，可能很早就知道了。
- r.js未对此进行优化
使用require-css
- 这似乎更倾向于AMD加载CSS - 我宁愿加载所有的CSS
- 自动加载CSS文件的问题与其他选项相同
创建我自己的脚本，在没有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"
    }
  }
}

使用r.js连接CSS

1 个答案: