Concat scripts in order with Gulp Concat scripts in order with Gulp javascript javascript

Concat scripts in order with Gulp


I had a similar problem recently with Grunt when building my AngularJS app. Here's a question I posted.

What I ended up doing is to explicitly list the files in order in the grunt config. The config file will then look like this:

[  '/path/to/app.js',  '/path/to/mymodule/mymodule.js',  '/path/to/mymodule/mymodule/*.js']

Grunt is able to figure out which files are duplicates and not include them. The same technique will work with Gulp as well.


Another thing that helps if you need some files to come after a blob of files, is to exclude specific files from your glob, like so:

[  '/src/**/!(foobar)*.js', // all files that end in .js EXCEPT foobar*.js  '/src/js/foobar.js',]

You can combine this with specifying files that need to come first as explained in Chad Johnson's answer.


I have used the gulp-order plugin but it is not always successful as you can see by my stack overflow post gulp-order node module with merged streams. When browsing through the Gulp docs I came across the streamque module which has worked quite well for specifying order of in my case concatenation. https://github.com/gulpjs/gulp/blob/master/docs/recipes/using-multiple-sources-in-one-task.md

Example of how I used it is below

var gulp         = require('gulp');var concat       = require('gulp-concat');var handleErrors = require('../util/handleErrors');var streamqueue  = require('streamqueue');gulp.task('scripts', function() {    return streamqueue({ objectMode: true },        gulp.src('./public/angular/config/*.js'),        gulp.src('./public/angular/services/**/*.js'),        gulp.src('./public/angular/modules/**/*.js'),        gulp.src('./public/angular/primitives/**/*.js'),        gulp.src('./public/js/**/*.js')    )        .pipe(concat('app.js'))        .pipe(gulp.dest('./public/build/js'))        .on('error', handleErrors);});