Gulpfile is incorrectly loading angular files into index.html

Question

I am using gulp-inject to create an index.html page. I noticed in their documentation they showed both how to load angular files and bower files so followed the basic instructions.

var angularFilesort = require('gulp-angular-filesort'),
    bowerFiles = require('main-bower-files');

gulp.task('index', function () {
  var angularStream = gulp.src('client/**/*.js', { base: './' })
    .pipe(angularFilesort())
    .pipe(concat('app.min.js'))
    .pipe(gulp.dest('./build/client/scripts'));

  gulp.src('./server/templates/index.html')
    .pipe(inject(gulp.src(bowerFiles(), { read: false }), { name: 'bower'}))
    .pipe(inject(es.merge(angularStream)))
    .pipe(gulp.dest('./build/client/'))
});

However, when I look at the way my angular files built, it looks like it is almost in reverse. I only have three angular files now, so it looks like this:

'use strict';

app.config(['$routeProvider',
  function ($routeProvider) {
    $routeProvider.when('/', {
      templateUrl: '/client/partials/home.html'
    })
  }
]);

'use strict';

var app = angular.module('app', ['ngRoute']);

How do I load my angular files in the correct order and concatenate them?

Answer 1

Ah. Alas, I found the problem.

.pipe(angularFilesort())
.pipe(concat('app.min.js'))

should be

.pipe(concat('app.min.js'))
.pipe(angularFilesort())

Sorry bout that.