5

我有一个包含几个 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 文件

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

4

4 回答 4

20

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

  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");

  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更好的。

于 2013-09-20T23:04:40.847 回答
7

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

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

(...)

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

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

于 2013-06-03T19:08:14.923 回答
0

RequireJS可以缩小 CSS 文件。

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

optimizeCss: 'default'
于 2014-11-09T22:57:46.843 回答
0

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

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

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

于 2015-03-13T09:36:14.340 回答