Wie man injizierte Dateien mit Gulp bestellt?

Question

Meine Angular Anwendung hat die folgende Struktur

- src/app/main/ 
    | 
    -main.js 
    -main.controller.js 
    -index.html 

ich Gulp bin mit. Nach Abschluss des Builds werden die *.js Dateien in der falschen Reihenfolge in index.html Dateien injiziert. Die Datei main.js hängt von main.controller.js ab, daher muss main.controller.js vor main.js eingespritzt werden.

<!-- build:js({.tmp/serve,.tmp/partials,src}) scripts/app.js --> 
<!-- inject:js --> 
<script src="app/main/main.js"></script> 
<script src="app/main/main.controller.js"></script> 
<script src="app/index.js"></script> 
<!-- endinject --> 

Das ist mein gulpfile.js

'use strict'; 

var gulp = require('gulp'); 
var gutil = require('gulp-util'); 
var wrench = require('wrench'); 

var options = { 
    src: 'src', 
    dist: 'dist', 
    tmp: '.tmp', 
    e2e: 'e2e', 
    errorHandler: function(title) { 
    return function(err) { 
     gutil.log(gutil.colors.red('[' + title + ']'), err.toString()); 
     this.emit('end'); 
    }; 
    }, 
    wiredep: { 
    directory: 'bower_components', 
    exclude: [/jquery/, /bootstrap-sass-official\/.*\.js/, /bootstrap\.css/] 
    } 
}; 

wrench.readdirSyncRecursive('./gulp').filter(function(file) { 
    return (/\.(js|coffee)$/i).test(file); 
}).map(function(file) { 
    require('./gulp/' + file)(options); 
}); 

gulp.task('default', ['clean'], function() { 
    gulp.start('build'); 
}); 

Answer 1

Verwenden gulp-angular-filesort in Ihrem inject.js

https://www.npmjs.com/package/gulp-angular-filesort

richtig funktioniert, jeder Winkel Datei einen eindeutigen Namen haben muss Modul- und Setter-Syntax (mit den Klammern), dh angular.module ('myModule', []).

Beispiel inject.js:

module.exports = function(options) { 
    gulp.task('inject', ['scripts', 'styles'], function() { 
    var injectStyles = gulp.src([ 
     options.tmp + '/serve/app/**/*.css', 
     '!' + options.tmp + '/serve/app/vendor.css' 
    ], { read: false }); 

    var injectScripts = gulp.src([ 
     options.src + '/app/**/*.js', 
     '!' + options.src + '/app/**/*.spec.js', 
     '!' + options.src + '/app/**/*.mock.js' 
    ]) 
    .pipe($.angularFilesort()).on('error', options.errorHandler('AngularFilesort')); 

    var injectOptions = { 
     ignorePath: [options.src, options.tmp + '/serve'], 
     addRootSlash: false 
    }; 

    return gulp.src(options.src + '/*.html') 
     .pipe($.inject(injectStyles, injectOptions)) 
     .pipe($.inject(injectScripts, injectOptions)) 
     .pipe(wiredep(options.wiredep)) 
     .pipe(gulp.dest(options.tmp + '/serve')); 

    }); 
}; 

Answer 2

Es funktioniert für mich, zuerst die wichtigen js Dateien in der Gulp Quelle Array zu definieren:

var target = gulp.src('app/index.html'); 
var sources = gulp.src(['app/scripts/core/app.js','app/scripts/**/*.js'], {read: false}); 
target.pipe(inject(sources, {})).pipe(gulp.dest('app')); 

Answer 3

Ich reparierte dieses Problem durch die Verwendung von gulp-natural-sort und stream-series Module. bestellt Ihre Dateien in einer konsistenten Reihenfolge und nimmt mehrere Streams von Dateien und Orten vor dem anderen.

Mein Code sieht wie folgt aus:

var series = require('stream-series'); 
var naturalSort = require('gulp-natural-sort'); 

gulp.task('inject', function() { 
    log('Injecting custom scripts to index.html'); 

    var theseComeFirst = gulp.src(["somepath/first*.js", {read: false}).pipe(naturalSort()); 

    var theseComeSecond = gulp.src("somepath/second*.js", {read: false}).pipe(naturalSort()); 

    return gulp 
     .src("*.html") 
     .pipe($.plumber({errorHandler: handleError})) 
     .pipe($.inject(series(theseComeFirst, theseComeSecond), {relative: true})) 
     .pipe(gulp.dest('client/')); 
}); 

Sie haben soeben den Stream-Serie nutzen könnten, so lange wie Sie kümmern sich nicht, wenn die anderen in Ordnung sind oder nicht. Unglücklicherweise wird inject() jedes Mal, wenn es läuft, die Dateien in eine zufällige Reihenfolge in zufälliger Reihenfolge bringen, was mir die Heebee Jeebees gibt.