CODEWITHSUNDEEP
gulp
daniel.sedlacek
daniel.sedlacek

Reputation: 8629

gulp, usemin and requireJS

I am using gulp-usemin to minify and concat CSS and JS files and rename the references in the index.html. But my project also uses requireJS to load AMD modules from multiple files that are not referenced directly in the index.html and are not concatenated with the rest. 

<!-- 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 -->

How do I combine usemin with some other gulp plugin to make the requireJS files part of the output? The answer will probably contain something like amd-optimize but I do not understand yet how to combine this with gulp-usemin.

Upvotes: 1

Views: 600

Answers (1)

escapedcat
escapedcat

Reputation: 766

Not sure if I get this right, but it looks like you might want to use requireJS for all your JS-files and usemin only for your CSS.

If I look at your code I would add your lib-files to the main.js and remove them from your index.html. And later on use gulp-requirejs to create your build-js file.

Hope this helps.

Update:

Usually I would try to check if the libs work with RequireJS and than integrate them using 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 });
});

This works for the demo page of farbtastic if you use RequireJS. The other libs hopefully can be used like this as well. In this way you could combine all your JS using RequireJS.

Upvotes: 1

Related Questions