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

Question

[Gasherez]

Пытаюсь подключить masonry.js через 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 зависимости

├─┬ 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

Склеивание файла идет в такой последовательности:

<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>

а нужно в такой:

<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>

Если кто-то знает как решить эту проблему, подскажите пожалуйста, буду очень признателен.

Comments

[Sergej]

Для начала стоит научиться оформлять код, нажав в редакторе на троеточие.
Вероятно надо так же показать не только таск но и описание.

uglify      = require('gulp-uglify')   # Минификация JS
plumber     = require('gulp-plumber')  # Отказоустойчиваость
ngAnnotate  = require('gulp-ng-annotate') # Анотации для AngularJs

Описать проблему, которая у вас появляется. В частности ошибки и чего именно вы хотите добиться.
А не как вы, у меня все склеивается, вот мой такс, разбирайтесь.

У вас gulpfile лежит в одной директории с кодом? Интересно.

[Gasherez]

Нет. gulpfile лежит в корне, как положено

Answer 1

[Homsa Toft]

gulp-order