如何使用RequireJS缩小css文件 [英] How to minify css files with RequireJS

问题描述

我有一个主干项目，有几个js文件和几个css文件

我想让他们缩小到单个js和单个css

到目前为止，我设法连接和缩小我的所有js文件到一个main.min.js

现在我试图对css文件做同样的事情。

这是我的布局：

  css 
 bootstrap.css 
 docs.css 
 ... 
 js 
 optim-node（运行优化器的脚本）
 app 
 main.js（我的应用程序的入口点）
 require-main.js 
 index.html 
  

这是我的脚本来缩小它

 ＃optimize-node 
 node ../../r.js -o baseUrl =。 mainConfigFile = app / require-main.js 
  

这是我的require-main.js

  / * globals require * / 
'use strict'; 
 //为您的应用程序设置require.js配置文件
 require.config（{
 
 //取消注释创建一个没有优化的单个文件
 //使用主应用程序文件
初始化应用程序：deps：['app / main']，// b： 
 
 preserveLicenseComments：false，
 
 out：'main.min.js'，
 name：'app / main'，
 
路径：{
 //在main.min中嵌入require require 
'requireLib'：'lib / require.min'，
 
 //库
 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'，
 
 [...] 
}，
包括：['requireLib']，
 shim： 
 lodash：{
 exports：'_'
}，
 backbone：{
 deps：['lodash'，'jquery']，
 export ：'Backbone'
}，
 [...] 
} 
}）; 
  

使用此配置，当我运行optimize-node时，所有工作都很好， app / main.min.js文件生成

现在我试图修改配置以生成此文件，还有一个css / main.min.css文件css / *。css连接和缩小的内容

我尝试替换这些行

 code> //单文件优化
 out：'main.min.js'，
 name：'app / main'，
  

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

  //多文件优化
 dir：'../../build'，
 appDir：'../'，
 modules：[
 {
 name：'app / main'，
 include：['app / main'] 
} 
]，
  pre> 
 
 
但它不能正常工作
 
 
 
我的整个项目被复制到../ .. / build，每个文件都是优化的
 
 
 
我不知道如何添加另一个模块，只是选择css文件
 
 
 
 Perhaphs我应该创建一个只关心css / *。css文件的require-css.js文件
 
 
 
任何人都可以帮助我吗？我认为这应该是一个很常见的情况
解决方案
  r.js 不按此方式工作：（从文档）
 
 
 RequireJS具有执行以下操作的优化工具
 
 
 
（...）
 
 
 
通过内联@import引用的CSS文件并删除注释来优化CSS。
 
 
您必须创建一个master样式表它通过 @import 引用单个CSS文件，没有在指定文件夹中连接* .css的选项。
 
I have a backbone project with several js files and a couple of css files

I'd like to have them minified to a single js and a single css

So far, I managed to concatenate and minify all my js file to a single main.min.js

Now I'm trying to do the same with the css files

this is my layout:
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
this is my script to minify it
# optimize-node
node ../../r.js -o baseUrl=. mainConfigFile=app/require-main.js
this is my 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'
    },
    [...]
  }
});
with this configuration, when I run optimize-node, it all works prefectly fine, and a js/app/main.min.js file is generated

Now I'm trying to modify the configuration to generate this file and also a css/main.min.css file with the contents of css/*.css concatenated and minified

I tried replacing these lines
// single file optimization
out  : 'main.min.js',
name : 'app/main',
with this configuration to define two modules, one for the js and another for the css
// multiple file optimization
dir: '../../build',
appDir: '../',
modules: [
  {
    name: 'app/main',
    include: ['app/main']
  }
],
But it doesn't work as expected

My whole project is copied to ../../build, and each file is optimized

And I don't know how to add another module that would just pick the css files

Perhaphs I should create a require-css.js file that just takes care of css/*.css files

Can anybody help me with this? I think it should be a pretty common scenario
解决方案
r.js doesn't work this way: (from the docs)

  
RequireJS has an optimization tool that does the following
  
  
(...)
  
  
Optimizes CSS by inlining CSS files referenced by @import and removing comments.
You'll have to create one "master" stylesheet which references individial CSS files via @import, there's no option for concatenation of *.css in a specified folder.

                        
这篇关于如何使用RequireJS缩小css文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！