如何使用RequireJS压缩CSS文件

Question

我有一个backbone项目，其中包含几个js文件和一些css文件。

我想将它们压缩成单个js和单个css文件。

到目前为止，我已经将所有的js文件连接并压缩成了一个名为main.min.js的文件。

现在我正在尝试对css文件执行同样的操作。

这是我的布局：

css
  bootstrap.css
  docs.css
  ...
js
  optimize-node (script to run the optimizer)
  app
    main.js (entry point of my app)
    require-main.js
index.html

这是我用来压缩代码的脚本

# optimize-node
node ../../r.js -o baseUrl=. mainConfigFile=app/require-main.js

这是我的 require-main.js。

/*globals require*/
'use strict';
// Set the require.js configuration file for your application
require.config({

  // uncomment to create a single file with no optimization at all
  // optimize: 'none',
  baseUrl: 'js',

  // Initialize the application with the main application file
  deps : ['app/main'],

  preserveLicenseComments: false,

  out  : 'main.min.js',
  name : 'app/main',

  paths: {
    // Embed require in main.min
    'requireLib' : 'lib/require.min',

    // Libraries
    jquery       : 'lib/jquery-1.10.1',
    jqueryui     : 'lib/jquery-ui-1.8.21.custom',
    moment       : 'lib/moment-2.0.0',
    datepicker   : 'lib/bootstrap-datepicker-1.0.1',

    [...]
  },
  include : ['requireLib'],
  shim: {
    lodash: {
      exports: '_'
    },
    backbone: {
      deps    : ['lodash', 'jquery'],
      exports : 'Backbone'
    },
    [...]
  }
});

使用这个配置时，当我运行 optimize-node 命令时，它可以完美地工作，能够生成一个 js/app/main.min.js 文件。

现在我想修改配置文件，让它不仅可以生成上述文件，还需要生成一个 css/main.min.css 文件，其中包含 css/*.css 文件的内容，并将它们合并和压缩。

我尝试替换以下这些行：

// single file optimization
out  : 'main.min.js',
name : 'app/main',

使用此配置定义两个模块，一个用于 JavaScript，另一个用于 CSS。

// multiple file optimization
dir: '../../build',
appDir: '../',
modules: [
  {
    name: 'app/main',
    include: ['app/main']
  }
],

但它并没有按预期工作

我的整个项目都复制到了../../build中，并对每个文件进行了优化

我不知道如何添加另一个模块，只需选择css文件

也许我应该创建一个require-css.js文件，专门处理css/*.css文件

有人可以帮我吗？我认为这应该是一个相当普遍的情况

- opensas

Answer 1

有一些简单的步骤需要遵循：

1. (方法1首选)通过将所有CSS文件合并为一个来创建style.css文件

   cat css/firstfile.css css/secondfile.css > style.css

   (方法2) 创建一个style.css文件，并将您的其他css文件全部@import到此文件中。

   @import url("css/firstfile.css");

   @import url("css/secondfile.css");

2. 创建build.js文件，如下所示：

   ({ cssIn: './css/style.css', out: './css/style.min.css', optimizeCss: 'default' })

3. 使用require.js缩小此文件

   r.js -o build.js

4. 修改您的index.html文件，仅包括此缩小后的style.min.css文件

   <link rel="stylesheet" type="text/css" href="css/style.min.css">

注意

之所以首选方法1是因为如果您使用import，则会将CSS文件作为“链接”导入，浏览器仍然必须进行单独的调用来获取它们，但是如果您将所有文件连接起来，它们将成为一个单独的css文件，传输和压缩更加高效。

- Reza S

---

实际上没有必要重命名被压缩的文件（即style.css -> style.min.css），r.js可以原地内联内容。这样，index.html在开发和生产中都可以引用相同的样式表名称。 - kryger

你能详细说明一下吗？ - Reza S

Answer 2

r.js不能像这样工作：（来自文档）

RequireJS有一个优化工具，可以执行以下操作：

(...)

通过内联@import引用的CSS文件并删除注释来优化CSS。

您需要创建一个“主”样式表，通过@import引用各个CSS文件，没有在指定文件夹中连接*.css的选项。

- kryger

Answer 3

您可以通过先将 “require-css” 添加到项目中（最简单的方式是通过 bower），然后在您的 main.js 或 gruntfile.js 中使用以下结构来获得类似的效果：

shim:{
 'app/my.module': {
            deps:[
                "css!app/css/app.css"
            ]
        }
}

接下来，r.js 优化器将会把你的 CSS 依赖文件进行压缩和合并，并将其输出到 JS 文件中。

- Dan Ochiana

Answer 4

RequireJS 可以 压缩 CSS 文件。

你只需要使用这个选项：

optimizeCss: 'default'

- Scott Tesler

---

无法工作，我们可能需要指定cssIn，但是对于多个CSS文件，它将如何工作是另一个问题。 - coding_idiot