gulp concat les scripts dans l'ordre?

Question

Disons par exemple que vous êtes la construction d'un projet sur l'épine dorsale ou quoi que ce soit et vous avez besoin de charger des scripts dans un certain ordre, ex "underscore.js" doit être chargé en premier, avant d' "backbone.js".

Comment puis-je obtenir pour concat les scripts de sorte que c'est dans l'ordre?

// JS concat, strip debugging and minify
gulp.task('scripts', function() {
    gulp.src(['./source/js/*.js', './source/js/**/*.js'])
    .pipe(concat('script.js'))
    .pipe(stripDebug())
    .pipe(uglify())
    .pipe(gulp.dest('./build/js/'));
});

J'ai le droit afin de scripts dans mon source/index.html mais vu que les fichiers sont organisés par ordre alphabétique, gulp sera concat trait de soulignement après backbone.js et l'ordre des scripts dans mon source/index.html n'a pas d'importance, il regarde les fichiers dans le répertoire.

Si quelqu'un a une idée sur ce point?

La meilleure idée que j'ai est de renommer le vendeur scripts avec 1,2,3 pour leur donner le bon ordre, mais je ne sais pas si j'aime ça.

Edit: Comme je l'ai appris plus j'ai trouvé browserify est une excellente solution, il peut être une douleur au début, mais c'est génial.

Answer 1

J'ai eu le même problème récemment avec Grunt lors de la construction de mon application AngularJS. Voici une question que j'ai posté.

Ce que j'ai fini par faire, c'est explicitement liste les fichiers dans l'ordre dans le grunt config. De sorte qu'il ressemblait à:

[
  '/path/to/app.js',
  '/path/to/mymodule/mymodule.js',
  '/path/to/mymodule/mymodule/*.js'
]

Et les choses fonctionnaient. Et Grunt est apparemment assez intelligent pour ne pas l'inclure deux fois le même fichier.

Answer 2

Une autre chose qui aide si vous avez besoin de quelques fichiers à venir après une goutte de fichiers, est à exclure des fichiers spécifiques de votre glob, comme suit:

[
  '/src/**/!(foobar)*.js', // all files that end in .js EXCEPT foobar*.js
  '/src/js/foobar.js',
]

Vous pouvez combiner cela avec spécifier les fichiers qui doivent venir en premier, comme expliqué au Tchad Johnson réponse.

Answer 3

J'ai utilisé le clin d'oeil, afin plugin, mais il n'est pas toujours couronnée de succès comme vous pouvez le voir par mon stack overflow post gulp ordre nœud module avec des flux fusionnés. Lors de la navigation par le biais de la Gulp docs je suis tombé sur le streamque module qui a très bien fonctionné pour la spécification de l'ordre de dans mon cas de concaténation. https://github.com/gulpjs/gulp/blob/master/docs/recipes/using-multiple-sources-in-one-task.md

Exemple de la façon dont je l'ai utilisé est ci-dessous

var gulp         = require('gulp');
var concat       = require('gulp-concat');
var handleErrors = require('../util/handleErrors');
var streamqueue  = require('streamqueue');

gulp.task('scripts', function() {
    return streamqueue({ objectMode: true },
        gulp.src('./public/angular/config/*.js'),
        gulp.src('./public/angular/services/**/*.js'),
        gulp.src('./public/angular/modules/**/*.js'),
        gulp.src('./public/angular/primitives/**/*.js'),
        gulp.src('./public/js/**/*.js')
    )
        .pipe(concat('app.js'))
        .pipe(gulp.dest('./public/build/js'))
        .on('error', handleErrors);
});

Answer 4

Le tri-flux peut également être utilisé pour assurer l'ordre spécifique de fichiers avec l' gulp.src. Exemple de code qui met l' backbone.js toujours comme le dernier fichier à traiter:

var gulp = require('gulp');
var sort = require('sort-stream');
gulp.task('scripts', function() {
gulp.src(['./source/js/*.js', './source/js/**/*.js'])
  .pipe(sort(function(a, b){
    aScore = a.path.match(/backbone.js$/) ? 1 : 0;
    bScore = b.path.match(/backbone.js$/) ? 1 : 0;
    return aScore - bScore;
  }))
  .pipe(concat('script.js'))
  .pipe(stripDebug())
  .pipe(uglify())
  .pipe(gulp.dest('./build/js/'));
});

Answer 5

Je viens d'ajouter des numéros au début du nom de fichier:

0_normalize.scss
1_tikitaka.scss
main.scss

Il travaille dans le gulp sans aucun problème.