如何使用 RequireJS 缩小 css 文件答案

【问题标题】：How to minify css files with RequireJS如何使用 RequireJS 缩小 css 文件
【发布时间】：2013-05-29 20:52:42
【问题描述】：

我有一个包含几个 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'
    },
    [...]
  }
});

使用此配置，当我运行优化节点时，一切正常，并生成了一个 js/app/main.min.js 文件

现在我正在尝试修改配置以生成此文件以及 css/main.min.css 文件，其中包含 css/*.css 内容的连接和缩小

我尝试替换这些行

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

用这个配置定义两个模块，一个用于js，另一个用于css

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

但它并没有按预期工作

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

而且我不知道如何添加另一个只选择 css 文件的模块

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

谁能帮我解决这个问题？我认为这应该是一个很常见的场景

【问题讨论】：

标签： css requirejs minify uglifyjs

【解决方案1】：

r.js 不能这样工作：(from the docs)

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

(...)

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

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

【讨论】：

【解决方案2】：

有一些简单的步骤可以遵循：

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

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

(方法 2) 创建一个 style.css 文件并将@import所有其他 css 放入此文件中。

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

@import url("css/secondfile.css");
如下创建build.js文件：

({ cssIn: './css/style.css', out: './css/style.min.css', optimizeCss: 'default' })
使用 require.js 缩小这个文件

r.js -o build.js
修改您的 index.html 以仅包含此缩小的 style.min.css 文件

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

注意

首选方法 1 的原因是，如果您使用 import CSS 文件作为“链接”导入，并且浏览器仍然需要单独调用来获取它们，但是如果您将所有文件连接起来，它就是一个单独的 css 和它会更好地传输和 gzip。

【讨论】：

其实不需要重命名压缩文件（即style.css -> style.min.css），r.js 可以就地内联内容。这样 index.html 可以在开发和生产中引用相同的样式表名称。
你能详细说明一下吗？

【解决方案3】：

RequireJS 可以缩小 CSS 文件。

您需要做的就是使用此选项：

optimizeCss: 'default'

【讨论】：

不起作用，我们可能必须指定 cssIn，但它如何适用于多个 CSS 文件是另一个问题。

【解决方案4】：

您可以通过首先将 'require-css' 添加到您的项目（最容易通过 bower），然后在您的 main.js 或 gruntfile.js 中使用以下构造来获得类似的效果：

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

在此之后，r.js 优化器将 minifi 并将您的 css 依赖连接到它的输出 js 文件中。

【讨论】：