如何来缩小与RequireJS

我有几个js文件骨干项目和一对夫妇的CSS文件如何来缩小与RequireJS

我希望让他们精缩到一个单个的JS和一个CSS

所以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

这是我的要求，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' 
    }, 
    [...] 
    } 
});

此配置，当我运行优化节点，这一切工作prefectly罚款，并生成一个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.js文件，只是需要照顾的css/*。css文件

灿有人帮我解决这个问题吗？我认为这应该是一个相当常见的场景

来源

2013-06-03 opensas

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

RequireJS有一个优化工具，做以下

（...）

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

你必须创建一个“主”的样式表，其通过@import引用individial CSS文件，有在指定的文件夹中的*的.css级联别无选择。

来源

2013-06-03 19:08:14 kryger

有一些简单的步骤如下：

（方法1 首选）创建由concatinating所有的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，并且它会更好地传输并更好地压缩。

来源

2013-09-20 23:04:40

实际上，不需要重命名缩小文件（即style.css - > style.min.css），r.js可以就地内联内容。这样index.html可以在开发和生产中引用相同的样式表名称。 – kryger

你能详细解释一下吗？ –

RequireJS can缩小CSS文件。

所有你需要做的就是使用此选项：

optimizeCss: 'default'

来源

2014-11-09 22:57:46

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

可以通过先加入“需要CSS的”到您的项目（由鲍尔的方式最容易）获得类似的效果，然后使用以下构建您的main.js或gruntfile.js：

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

在此之后，r.js优化器将minifi并连接你的CSS的依赖转化成其输出的js文件。

来源

2015-03-13 09:36:14

如何来缩小与RequireJS

回答

相关问题