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我应该创建一个只需要处理css / * .css文件的require-css.js文件

有人可以帮我这个吗？我认为这应该是一个非常常见的场景

Answer 1

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

（方法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。

Answer 2

r.js不能以这种方式运作：（from the docs）

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

（...）

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

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

Answer 3

RequireJS 可以缩小CSS文件。

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

optimizeCss: 'default'

Answer 4

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

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

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

如何使用RequireJS缩小css文件

4 个答案: