如何來縮小與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

回答

相關問題