r.js来合并压缩css文件的示例

我们来详细讲解一下如何使用r.js来合并压缩CSS文件。在开始前，需要先确认以下两点：

1. 确保已经安装了Node.js和r.js
2. 准备好需要合并压缩的CSS文件

流程大致如下：

1. 创建一个配置文件
2. 运行r.js进行压缩合并

下面我们将具体讲解这两个步骤。

1.创建一个配置文件

在命令行中进入包含CSS文件的目录，输入以下命令：

r.js -cssIn=style.css -out=style-built.css

其中-cssIn参数用于指定需要合并的CSS文件，-out参数用于指定输出的合并后的文件名。

当然，更好的方式是创建一个配置文件。配置文件看起来像这样：

({
    cssIn: 'style.css',
    out: 'style-built.css'
})

然后在命令行中运行以下命令：

r.js -o build.config.js

其中-o参数表示告诉r.js使用传递给它的配置文件。build.config.js是你创建的配置文件的名称和路径。

2. 运行r.js进行压缩合并

以上步骤完成之后，就可以直接运行r.js进行压缩合并了。在命令行中运行以下命令：

r.js -o build.config.js optimizeCss=true

这里的optimizeCss参数告诉r.js对CSS文件做优化处理。你也可以不设置这个参数，r.js仍然会处理CSS文件，但是可能不能做到最优。

再来看两个示例说明。

示例1：合并多个CSS文件

当你有多个CSS文件需要合并时，配置文件可以这样写：

({
    cssIn: ['style1.css', 'style2.css', 'style3.css'],
    out: 'style-all-built.css'
})

这里通过cssIn参数指定多个CSS文件，r.js会将这些文件合并为一个名为style-all-built.css的文件。

示例2：输出压缩后的CSS文件

如果需要将压缩后的CSS文件输出到一个指定目录下，可以这样写配置文件：

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

这里的./dist表示输出文件的目录，如果这个目录不存在，r.js将会自动创建它。

希望以上内容对你有所帮助。