grunt concat js/css

我創建了一個網站，在客戶端使用backbone + requirejs + bootstrap，在服務器端使用php REST。該網站包含很多.js文件。在需要時使用requirejs加載.js（以實現異步加載）。grunt concat js/css

但是，我最近開始使用Node.js + Yeoman + grunt + bower。我使用Yeoman webapp生成器來再次創建我的web的基本結構。當我構建我的網站時，它會將所有.js文件連接成一個.js文件，並將該標記放在index.html中以引用它。從我的理解，專業人士是整個.js緩存在客戶端的瀏覽器。這在第一次訪問時很慢，但是在重新訪問時很快。由於一切都連接到1文件，並將其加載到客戶端的瀏覽器，所以我猜這種情況下異步加載不起作用。（糾正我，如果我錯了）。

*該網站是爲移動和桌面創建的。（1個SRC 2版）

我應該在Concat的1個單個文件
，或者我應該用requirejs，要求的.js當我需要它（異步加載）的所有.js文件？
如何在Node中配置requirejs。我以正常的方式嘗試了它（包括index.html中的data-main，當我使用grunt build編譯時，它給我錯誤「......沒有更多的支持」）
Browserify與requirejs類似節點？

我花了一個星期，已經弄清楚，但仍然沒有運氣。希望有人能指點正確的方向。非常感謝。

的.js文件結構是一樣的東西這個：

-app 
    -vendor 
    -jquery.js 
    -backbone.js 
    -assets 
    -js 
     -model 
     -person.js 
     -collection 
     -people.js 
     -router.js 
     -controller.js 
-dist 
    -js 
    -build.js

來源

2014-04-01 Fingercross

我有熟悉的問題。因此，讓我們從文件連接的策略開始。有三種主要的方法可以遵循：

首先 - 在一個文件中總是將所有模塊連接起來，在這種情況下，您在第一次啓動時就鬆了，可能會贏或下一次啓動，但是您可能會遇到另一個問題 - 模塊從一起連接的文件，但始終加載所有模塊。

第二種方法是爲每種類型的頁面構建特定的連接文件並設置特定的模塊 - 這樣您就知道您有多少頁面類型併爲每個頁面創建文件 - 接下來您可以減小文件大小，但很難在頁面更改的情況下維護和需要手動設置更正。

第三步 - 編譯1個帶有庫和模塊的連接文件，幾乎在所有頁面上使用，所有其他東西（附加模塊，視圖，特殊模型和集合）按需加載。在SPA頁面的情況下，這種方法很好。

讓我來說幾句關於grunt + r.js配置。

第一次保存這個link。下面是配置的樣本：

requirejs: { 
    compile: { 
    options: { 
     baseUrl: "path/to/base", 
     mainConfigFile: "path/to/config.js", 
     name: "path/to/almond", 
     out: "path/to/optimized.js" 
    } 
    } 
}

主要在這裏點mainConfigFile - 這是一個文件，那麼你保持需要。config

下一步 - 配置r.js - 保留這個link對描述r.js的所有可能性非常有幫助。

通常它足以檢出這些鏈接。

此外，您可以檢出recommend file structure多頁網站，以避免將來出現問題。

此處還有一個指向similar post的鏈接 - 您可能會發現它很有用。

如果您還有其他問題，請告訴我。

關於CSS的幾句話 - 邏輯幾乎相同：您可以爲每個頁面創建單獨的文件或創建sinngle。這裏的要點是你的網站有多大。在我的情況下，我選擇了第二種方法，但老實說，第一種方法更具可擴展性，特別是在大型項目中。

來源

2014-04-01 06:39:11 Evgeniy

謝謝Evgeniy，非常詳細和明確的答案。我認爲這對我很有幫助。今晚會試試這個或者tmr。請讓你們知道我將走哪條路。 – Fingercross

@Fingercross高興地幫助:)如果您發現答案正確且有用，請將其標記爲正確。 – Evgeniy

我現在可以通過Backbone獲得requirejs的工作。然而，我不能用錯誤的東西像「Backbone is undefined」。我已經用這個命令「涼亭安裝木偶 - 保存」來安裝木偶。我在谷歌上做了一些搜索，有人說使用AMD版本的Marionette應該解決這個問題，並且在用AMD版本替換Marionette之後，這是工作。

但是我的問題是我怎樣才能使用「bower install」來安裝AMD版本的Marionette？
我的網站使用引導程序。當我用「grunt build」編譯網頁時。它將bootstrap的字體從「app/bower_components/bootstrap/dist/fonts」複製到「dist/bower_components/bootstrap/dist/fonts」，但是網頁是指「dist/fonts」字體。我如何改變它來引用正確的目錄？

我用喲webapp（用bootstrap）來生成我的web結構。

來源

2014-04-03 03:22:26 Fingercross

grunt concat js/css

回答

相關問題