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组合起来。