gulp，usemin和requireJS

Question

我正在使用gulp-usemin來縮小和連接CSS和JS文件並重命名index.html中的引用。但是我的項目也使用requireJS從多個文件中加載AMD模塊，這些文件沒有直接在index.html中引用，也沒有與其他文件連接。

<!-- build:js js/app.js --> 
<script src="js/libs/accounting.js"></script> 
<script src="js/libs/farbtastic.js"></script> 
<script src="js/libs/lz-string-1.3.3.js"></script> 
<script src="js/libs/color.js"></script> 
<script data-main="js/main" src="js/libs/require.js"></script> 
<!-- endbuild --> 

如何將usemin與其他一些gulp插件組合使用以使requireJS文件成爲輸出的一部分？答案可能包含像amd-optimize，但我不明白如何將這與gulp-usemin結合。

Answer 1

不知道我是否得到了正確的結果，但看起來您可能想要爲所有JS文件使用requireJS，並且僅將usemin用於CSS。

如果我看看您的代碼，我會將您的lib文件添加到main.js並將它們從您的index.html中刪除。稍後使用gulp-requirejs來創建您的build-js文件。

希望這會有所幫助。

更新：

通常我會嘗試檢查庫與RequireJS工作，也比使用http://bower.io

require.config.js它們整合：

require.config({ 
    // List of all the dependencies 
    paths: { 
     jquery:  'bower_components/jquery/jquery', 
     farbtastic: 'bower_components/farbtastic/src/farbtastic' 
    }, 
    // Ensure that the dependencies are loaded in the right order 
    shim: { 
     jquery: { 
      exports: '$' 
     }, 
     farbtastic: { 
      deps: ['jquery'] 
     } 
    } 
}); 
require(['main']); 

爲主。 js：

require([ 
    "jquery", 
    "farbtastic" 
], 
function() { 
    $('#colorpicker1').farbtastic('#color1'); 
    $('#colorpicker2').farbtastic({ callback: '#color2', width: 150 }); 
}); 

如果您使用RequireJS，則適用於demo page of farbtastic。其他庫也希望可以像這樣使用。 通過這種方式，您可以使用RequireJS將所有JS組合起來。