gulp-order

gulp-order copied to clipboard

Really love this library, but something I've been wondering about is ordering files within a sub directory of the given source.

My use case is probably fairly common, Bootstrap installed via Bower. Bootstrap annoyingly has a requirement for tooltip.js inside its popover.js, and of course by default tooltip would get loaded after popover in any build process.

To solve this I tried doing the following

var paths = {
    'concat':'js/concat/',
    'bootstrap':'boostrap-sass/vendor/assets/javascripts/bootstrap/*.js',
    'bowerJs':
    [
        'bower_components/**/*.js',
        '!bower_components/**/*.min.js',
        '!bower_components/jquery/src/**/*.js'
    ],
};

gulp.task('vendor', function() {
    return gulp.src(paths.bowerJs)
    .pipe(order(
        [
            'lodash/lodash.js',
            'jquery/dist/jquery.js',
            paths.bootstrap + 'bootstrap/affix.js',
            paths.bootstrap + 'bootstrap/alert.js',
            paths.bootstrap + 'bootstrap/button.js',
            paths.bootstrap + 'bootstrap/carousel.js',
            paths.bootstrap + 'bootstrap/collapse.js',
            paths.bootstrap + 'bootstrap/dropdown.js',
            paths.bootstrap + 'bootstrap/tab.js',
            paths.bootstrap + 'bootstrap/transition.js',
            paths.bootstrap + 'bootstrap/scrollspy.js',
            paths.bootstrap + 'bootstrap/modal.js',
            paths.bootstrap + 'bootstrap/tooltip.js',
            paths.bootstrap + 'bootstrap/popover.js',
        ]
    ))
    .pipe(print())
    .pipe(concat('vendor.concat.js'))
    .pipe(gulp.dest(paths.concat));
});

The overall order is correct (ie., lodash, jquery then bootstrap) but bootstrap's ordering is just sticking to alphabetical ordering of the files. I think I could probably achieve this by building bootstrap first and then calling another function to build them all together, but was wondering if there was a way to do it in a single function.