Concat scripts in order with Gulp
gulp, javascript
Solution
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.
Problem
Say, for example, you are building a project on Backbone or whatever and you need to load scripts in a certain order, e.g. `underscore.js` needs to be loaded before `backbone.js`. How do I get it to concat the scripts so that they’re in order? ``` // JS concat, strip debugging and minify gulp.task('scripts', function() { gulp.src(['./source/js/*.js', './source/js/**/*.js']) .pipe(concat('script.js')) .pipe(stripDebug()) .pipe(uglify()) .pipe(gulp.dest('./build/js/')); }); ``` I have the right order of scripts in my `source/index.html`, but since files are organized by alphabetic order, gulp will concat `underscore.js` after `backbone.js`, and the order of the scripts in my `source/index.html` does not matter, it looks at the files in the directory. So does anyone have an idea on this? Best idea I have is to rename the vendor scripts with `1`, `2`, `3` to give them the proper order, but I am not sure if I like this. As I learned more I found Browserify is a great solution, it can be a pain at first but it’s great.