How to work with gulp-order?

Question

gulp.js

2 hours trying to get gulp-order to sort files before concatenation. We have a list:

"js": [
    "bower_components/**/jquery.js",
    "bower_components/**/angular.js",
    "bower_components/**/bootstrap.js",
    "bower_components/**/material.js",
    "bower_components/**/ripples.js",
    "bower_components/**/angular-sweetnotifier.js",
    "bower_components/**/angular-animate.js",
    "bower_components/**/ui-bootstrap.js",
    "bower_components/**/ui-bootstrap-tpls.js",
    "bower_components/**/loading-bar.js",
    "bower_components/**/angular-touch.js",
    "bower_components/**/angular-ui-router.js",
    "bower_components/**/angular-inview.js",
    "bower_components/**/angular-messages.js",
    "bower_components/**/angular-re-captcha.js",
    "bower_components/**/sugar-full.min.js",
    "bower_components/**/ng-uuid.js",
    "bower_components/**/clipboard.js",
    "bower_components/**/file-saver/FileSaver.js",
    "bower_components/**/jszip.js",
    "bower_components/**/crypto-js.js",
    "bower_components/**/js-blowfish.js",
    "bower_components/**/js-json2xml.js",
    "bower_components/**/*.js"
  ];

Now .pipe(plugins.order(options.bower.order.js))it outputs this:

[12:36:59] bower_components/angular-animate/angular-animate.js
[12:36:59] bower_components/angular-inview/angular-inview.js
[12:36:59] bower_components/angular-messages/angular-messages.js
[12:36:59] bower_components/angular-re-captcha/angular-re-captcha.js
[12:36:59] bower_components/angular-sweetnotifier/dist/angular-sweetnotifier.js
[12:36:59] bower_components/angular-touch/angular-touch.js
[12:36:59] bower_components/angular-ui-router/release/angular-ui-router.js
[12:36:59] bower_components/angular/angular.js
[12:37:00] bower_components/bootstrap/dist/js/bootstrap.js
[12:37:00] bower_components/bootstrap-sass/assets/javascripts/bootstrap.js
[12:37:00] bower_components/clipboard/dist/clipboard.js
[12:37:00] bower_components/crypto-js/crypto-js.js
[12:37:00] bower_components/file-saver/FileSaver.js
[12:37:00] bower_components/jquery/dist/jquery.js
[12:37:00] bower_components/js-blowfish/js-blowfish.js
[12:37:00] bower_components/js-json2xml/js-json2xml.js
[12:37:00] bower_components/jszip/dist/jszip.js
[12:37:00] bower_components/angular-loading-bar/build/loading-bar.js
[12:37:00] bower_components/bootstrap-material-design/dist/js/material.js
[12:37:00] bower_components/ng-uuid/build/ng-uuid.min.js
[12:37:00] bower_components/bootstrap-material-design/dist/js/ripples.js
[12:37:00] bower_components/sugar/release/sugar-full.min.js
[12:37:00] bower_components/angular-bootstrap/ui-bootstrap-tpls.js
[12:37:00] bower_components/angular-bootstrap/ui-bootstrap.js

Well, how can you collect files in 1 if the dependencies are broken?

Answer 1

The code below will merge ALL .jsthe file from the folder bower_componentsand its subfolders.
In the final file , jquery will be first , then bootstrap , and then everything else.

// When passing gulp.src stream directly to order, don't include path source/scripts in the order paths.
// They should be relative to the /**/*.js.
Source

gulp
  .src("bower_components/**/*.js")
  .pipe(order([
    "jquery/dist/jquery.js",
    "bootstrap/dist/js/bootstrap.js"
  ]))
  .pipe(concat("all.js"))
  .pipe(gulp.dest("some/path"));