Concat les scripts dans l'ordre avec Gulp

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. Le fichier de configuration sera alors ressembler à ceci:

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

Grunt est en mesure de comprendre quels sont les fichiers doublons et de ne pas les inclure. La meme technique fonctionne avec Gulp ainsi.

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 en dessous de

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

La tri-flux peut également être utilisé pour assurer l'ordre spécifique de fichiers avec gulp.src. Exemple de code qui met le 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/'));
});

J'ai mes scripts sont organisés dans des dossiers différents pour chaque paquet que je tire de verdure, en plus de ma propre script pour mon application. Puisque vous allez à la liste de l'ordre de ces scripts quelque part, pourquoi ne pas en faire la liste dans votre gulp fichier? Pour les nouveaux développeurs sur votre projet, il est bon que l'ensemble de votre script les points d'extrémité sont répertoriés ici. Vous pouvez faire cela avec gulp-ajouter-src:

gulpfile.js

var gulp = require('gulp'),
    less = require('gulp-less'),
    minifyCSS = require('gulp-minify-css'),
    uglify = require('gulp-uglify'),
    concat = require('gulp-concat'),
    addsrc = require('gulp-add-src'),
    sourcemaps = require('gulp-sourcemaps');

//CSS & Less
gulp.task('css', function(){
    gulp.src('less/all.less')
        .pipe(sourcemaps.init())
        .pipe(less())
        .pipe(minifyCSS())
        .pipe(sourcemaps.write('source-maps'))
        .pipe(gulp.dest('public/css'));
});

//JS
gulp.task('js', function() {
    gulp.src('resources/assets/bower/jquery/dist/jquery.js')
    .pipe(addsrc.append('resources/assets/bower/bootstrap/dist/js/bootstrap.js'))
    .pipe(addsrc.append('resources/assets/bower/blahblah/dist/js/blah.js'))
    .pipe(addsrc.append('resources/assets/js/my-script.js'))
    .pipe(sourcemaps.init())
    .pipe(concat('all.js'))
    .pipe(uglify())
    .pipe(sourcemaps.write('source-maps'))
    .pipe(gulp.dest('public/js'));
});

gulp.task('default',['css','js']);

Remarque: jQuery et Bootstrap ajoutée pour les besoins de la démonstration de la commande. Probablement préférable d'utiliser les Cdn pour ceux puisqu'ils sont donc largement utilisés et les navigateurs pourraient les avoir mis en cache à partir d'autres sites déjà.

Une méthode alternative consiste à utiliser une Gorgée plugin créé spécialement pour ce problème. https://www.npmjs.com/package/gulp-ng-module-sort

Il vous permet de trier vos scripts en les ajoutant dans un .pipe(ngModuleSort()) en tant que tel:

var ngModuleSort = require('gulp-ng-module-sort');
var concat = require('gulp-concat');

gulp.task('angular-scripts', function() {
    return gulp.src('./src/app/**/*.js')
        .pipe(ngModuleSort())
        .pipe(concat('angularAppScripts.js))
        .pipe(gulp.dest('./dist/));
});

En supposant un répertoire convention:

|——— src/
|   |——— app/
|       |——— module1/
|           |——— sub-module1/
|               |——— sub-module1.js
|           |——— module1.js
|       |——— module2/
|           |——— sub-module2/
|               |——— sub-module2.js
|           |——— sub-module3/
|               |——— sub-module3.js
|           |——— module2.js
|   |——— app.js

Espérons que cette aide!

merge2 ressemble à la seule travail et maintenu commandé flux de la fusion de l'outil à l'heure actuelle.

Je suis dans un module environnement où tous sont au cœur-des personnes à charge à l'aide de gulp.
Ainsi, la core module doit être ajoutée avant les autres.

Ce que j'ai fait:

1. Déplacer tous les scripts pour un src dossier
2. Juste gulp-rename votre core répertoire _core

3. gulp est de garder l'ordre de votre gulp.src, mon concat src ressemble à ceci:

   concat: ['./client/src/js/*.js', './client/src/js/**/*.js', './client/src/js/**/**/*.js']

Il va évidemment prendre le _ que le premier répertoire de la liste (naturel de tri?).

Note (angularjs):
J'utilise ensuite gulp-angulaire-extender d'ajouter dynamiquement des modules à la core module.
Compilé, il ressemble à ceci:

angular.module('Core', ["ui.router","mm.foundation",(...),"Admin","Products"])

Où les Admin et les Produits sont de deux modules.

J'ai essayé plusieurs solutions à partir de cette page, mais aucune n'a fonctionné. J'ai eu une série de fichiers numérotés de qui je voulais simplement être ordonnée par ordre alphabétique foldername ainsi, lorsque les canalisations de concat() ils se retrouvaient dans le même ordre. C'est, à protéger l'ordre de l'expansion de l'entrée. Facile, droit?

Voici mon spécifiques de la preuve-de-concept de code (print est juste pour voir la commande imprimé à la cli):

var order = require('gulp-order');
var gulp = require('gulp');
var print = require('gulp-print').default;

var options = {};

options.rootPath = {
  inputDir: process.env.INIT_CWD + '/Draft',
  inputGlob: '/**/*.md',
};

gulp.task('default', function(){
  gulp.src(options.rootPath.inputDir + options.rootPath.inputGlob, {base: '.'})
    .pipe(order([options.rootPath.inputDir + options.rootPath.inputGlob]))
    .pipe(print());
});

La raison de la folie de gulp.src? J'ai déterminé que gulp.src était en cours d'exécution asynchrone lorsque j'ai été en mesure d'utiliser un sleep() fonction (à l'aide d'un .map avec sleeptime incrémenté par index) pour commander le flux de sortie correctement.

Le résultat de l'asynchrone de src dire dirs avec plus de fichiers il est venu après dirs avec moins de fichiers, parce qu'ils ont pris plus de temps à traiter.

Apparemment, vous pouvez passer dans le "nosort" option d'avaler.src gulp.src.