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，而只对你的CSS使用usemin。

如果我看一下你的代码，我会把你的库文件添加到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']);

main.js：

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

如果您使用RequireJS，这适用于demo page of farbtastic。其他库希望也能像这样使用。通过这种方式，您可以使用RequireJS组合所有的JS。