如何使用RequireJS缩小css文件

Question

我有一个骨干项目,有几个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',

使用此配置来定义两个模块,一个用于js,另一个用于css

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

但它没有按预期工作

我的整个项目被复制到../../build,每个文件都经过优化

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

Perhaphs我应该创建一个require-css.js文件来处理css/*.css文件

任何人都可以帮我吗？我认为这应该是一个非常常见的情况

Answer 1

有一些简单的步骤:

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

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

   (方法2)@import在此文件中创建一个style.css文件和所有其他css文件.

   @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首选的原因是如果你使用importCSS文件导入为"链接",浏览器仍然需要单独调用来获取它们,但是如果你将所有文件连接起来它就是一个单独的css它会传输和gzip更好.

Answer 2

r.js不这样工作:( 来自文档)

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

(......)

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

你必须创建一个"主"样式表,它通过引用单个CSS文件@import,在指定的文件夹中没有连接*.css的选项.