Jak zamówić wstrzyknięte pliki za pomocą Gulp?

Question

Moja aplikacja Angular ma następującą strukturę

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

używam Gulp. Po zakończeniu kompilacji pliki *.js są wstrzykiwane w niewłaściwej kolejności w index.html. Plik main.js zależy od main.controller.js, więc musi zostać wstrzyknięty przed main.js.

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

To jest mój 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

Zastosowanie gulp-angular-filesort w swoim inject.js

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

pracować prawidłowo, każdy plik kątowa musi mieć wyjątkowo nazwie składnia modułu i setera (z nawiasami), czyli angular.module ("mój moduł", []).

Przykład 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

To działa dla mnie najpierw zdefiniować ważne pliki js w tablicy źródłowej Gulp:

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

naprawiłem ten problem za pomocą gulp-natural-sort i moduły stream-series. gulp-natural-sort zamawia twoje pliki w spójnej kolejności, a stream-series pobiera wiele strumieni plików i umieszcza je jeden przed drugim.

Mój kod wygląda następująco:

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/')); 
}); 

Można po prostu użyć strumienia serii A, tak długo, jak nie obchodzi mnie, czy inni są w porządku, czy nie. Niestety inject() umieszcza pliki w grupie serii w nieco losowej kolejności za każdym razem, gdy działa, co daje mi heebee.