Как сортировать внедренный код на основе переменной массива?

Question

Я делаю Gulp Quickstart Pack. Где я использовал задачу для копирования всех файлов css и js из массива в локальную папку .

Пример:

var JS_Files = [
    './bower_components/jquery/dist/jquery.js',
    './bower_components/bootstrap/dist/js/bootstrap.min.js',
    './assets/js/app.js'
];

И я использовал следующий код для задачи gulp, чтобы скопировать файлы js .

gulp.task('copy_js_files', function(done) {
    return gulp.src(JS_Files)
        .pipe(gulp.dest('./dist/production/assets/js'))
        .pipe(size())
    done();
});

после копирования файла в локальную папку assets / js / я вставляю код во все мои html-файлы , чтобы показать эти источники. здесь следующий код:

gulp.task('inject_code_html', function(cb) {
    return gulp.src('./dist/production/*.html') //file with tags for injection
        .pipe(inject(gulp.src(['./dist/production/assets/js/*.js', './dist/production/assets/css/*.css'], {
            read: false
        }), {
            starttag: '<!-- gulp:{{ext}} -->',
            endtag: '<!-- endgulp -->',
            relative: true
        }))
        .pipe(gulp.dest('./dist/production')); //where .html will be saved. Same dir for overwrite old one
})

Там все работает нормально, как и ожидалось, но проблема в том, Показывает весь код в алфавитном порядке в моем HTML.

Пример:

<!-- gulp:js -->   
<script src="assets/js/app.js"></script>   
<script src="assets/js/bootstrap.min.js"></script>  
<script src="assets/js/jquery.js"></script>
<!-- endgulp -->

Но Я хочу , чтобы показать код , как показано ниже :

<!-- gulp:js -->   
<script src="assets/js/jquery.js"></script>    
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/app.js"></script>    
<!-- endgulp -->

Потому что мне нужно сначала поставить jQuery в моем коде и app.js в последнем в коде. Как я могу решить эту проблему?

Полный gulpfile есть https://github.com/themeix/gulp-quickstart-pack/blob/master/gulpfile.js

Заранее спасибо.