How to connect the bower components in the correct sequence?

Question

gulp.js

I'm trying to include masonry.js via gulp main-bower-files.
gulpfile.js

var gulp = require('gulp'),
    jade = require('gulp-jade'),
    compass = require('gulp-compass'),
    connect = require('gulp-connect'),
    plumber = require('gulp-plumber');
    concat = require('gulp-concat');
    uglify = require('gulp-uglify');
    inject = require('gulp-inject');
    gFilter = require('gulp-filter');
    mainBowerFiles = require('main-bower-files');

gulp.task('bower', function () {
  var jsFilter = gFilter('**/*.js');
  var cssFilter = gFilter('**/*.css');
  var fontFilter = gFilter(['*.eot', '*.woff', '*.svg', '*.ttf']);
  return gulp.src(mainBowerFiles())
    .pipe(jsFilter)
    .pipe(concat('components.js')) //склеивание
    .pipe(uglify())
    .pipe(gulp.dest('Content/NewDesign/javascripts/'))
    .pipe(jsFilter.restore())
    .pipe(fontFilter)
    .pipe(gulp.dest('Content/NewDesign/fonts'))
    .pipe(fontFilter.restore());
});

bower.json

{
  "dependencies": {
    "jquery": "~2.1.3",
    "jquery.maskedinput": "~1.4.1",
    "bootstrap-sass": "~3.3.4",
    "fontawesome": "~4.3.0",
    "masonry": "~3.2.2",
    "fotorama": "~4.6.3"
  }
}

bower dependency

├─┬ bootstrap-sass#3.3.4                
│   └── jquery#2.1.3                      
├── fontawesome#4.3.0                   
├─┬ fotorama#4.6.3                      
│   └── jquery#2.1.3                      
├── jquery#2.1.3                        
├─┬ jquery.maskedinput#1.4.1            
│   └── jquery#2.1.3                      
└─┬ masonry#3.2.2 (3.2.3 available)   
     ├─┬ get-size#1.2.2                  
     │   └── get-style-property#1.0.4      
     └─┬ outlayer#1.3.0                  
          ├─┬ doc-ready#1.0.4               
          │   └── eventie#1.0.6               
          ├── eventEmitter#4.2.11           
          ├── eventie#1.0.6                 
          ├─┬ get-size#1.2.2                
          │   └── get-style-property#1.0.4    
          ├── get-style-property#1.0.4      
          └── matches-selector#1.0.3

The gluing of the file goes in the following sequence:

<script src="../EventEmitter.js"></script>
<script src=.."/doc-ready.js"></script>
<script src="../eventie.js"></script>
<script src="../get-size.js"></script>
<script src="../get-style-property.js"></script>
<script src="../imagesloaded.js"></script>
<script src="../js/item.js"></script>
<script src="../jquery.bridget.js"></script>
<script src="../masonry.js"></script>
<script src="../matches-selector.js"></script>
<script src="../outlayer.js"></script>

and you need something like this:

<script src="../get-style-property.js"></script>
<script src="../get-size.js"></script>
<script src="../eventie.js"></script>
<script src="../doc-ready.js"></script>
<script src="../EventEmitter.js"></script>
<script src="../jquery.bridget.js"></script>
<script src="../matches-selector.js"></script>
<script src="../item.js"></script>
<script src="../outlayer.js"></script>
<script src="../masonry.js"></script>
<script src="../imagesloaded.js"></script>

If someone knows how to solve this problem, tell me please, I will be very grateful.

Answer 1

gulp order