Guiones de Concat en orden con Gulp

Digamos, por ejemplo, que está creando un proyecto en Backbone o lo que sea y necesita cargar scripts en un orden determinado, por ejemplo underscore.js, debe cargarse antes backbone.js.

¿Cómo consigo que concatene los scripts para que estén en orden?

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

Tengo el orden correcto de los scripts en mi source/index.html, pero dado que los archivos están organizados por orden alfabético, gulp se concatenará underscore.jsdespués backbone.js, y el orden de los scripts en mi source/index.htmlno importa, mira los archivos en el directorio.

Entonces, ¿alguien tiene una idea sobre esto?

La mejor idea que tengo es cambiar el nombre de los proveedores con los scripts 1, 2, 3para darles el orden correcto, pero no estoy seguro de si me gusta este.

A medida que aprendí más, descubrí que Browserify es una gran solución, puede ser un dolor al principio, pero es genial.

Recientemente tuve un problema similar con Grunt al construir mi aplicación AngularJS. Aquí hay una pregunta que publiqué.

Lo que terminé haciendo es enumerar explícitamente los archivos en orden en la configuración de gruñido. El archivo de configuración se verá así:

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

Grunt es capaz de descubrir qué archivos son duplicados y no incluirlos. La misma técnica también funcionará con Gulp.

Otra cosa que ayuda si necesita que algunos archivos vengan después de una gran cantidad de archivos, es excluir archivos específicos de su globo, de esta manera:

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

Puede combinar esto con archivos de especificación que deben aparecer primero como se explica en la respuesta de Chad Johnson.

He utilizado el complemento gulp-order pero no siempre es exitoso, como puede ver en mi módulo de nodo de desbordamiento posterior al orden de desbordamiento de pila con flujos combinados . Al navegar por los documentos de Gulp, me encontré con el módulo streamque que ha funcionado bastante bien para especificar el orden de la concatenación en mi caso. https://github.com/gulpjs/gulp/blob/master/docs/recipes/using-multiple-sources-in-one-task.md

Ejemplo de cómo lo usé a continuación

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

Con gulp-useref puede concatenar cada script declarado en su archivo de índice, en el orden en que lo declara.

https://www.npmjs.com/package/gulp-useref

var $ = require('gulp-load-plugins')();
gulp.task('jsbuild', function () {
  var assets = $.useref.assets({searchPath: '{.tmp,app}'});
  return gulp.src('app/**/*.html')
    .pipe(assets)
    .pipe($.if('*.js', $.uglify({preserveComments: 'some'})))
    .pipe(gulp.dest('dist'))
    .pipe($.size({title: 'html'}));
});

Y en el HTML debe declarar el nombre del archivo de compilación que desea generar, así:

<!-- build:js js/main.min.js -->
    <script src="js/vendor/vendor.js"></script>
    <script src="js/modules/test.js"></script>
    <script src="js/main.js"></script>

En su directorio de compilación tendrá la referencia a main.min.js que contendrá vendor.js, test.js y main.js

La secuencia de clasificación también se puede utilizar para garantizar un orden específico de los archivos gulp.src. Código de muestra que coloca el backbone.jssiempre como el último archivo para procesar:

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

Solo agrego números al comienzo del nombre del archivo:

0_normalize.scss
1_tikitaka.scss
main.scss

Funciona en trago sin ningún problema.

Tengo mis scripts organizados en diferentes carpetas para cada paquete que extraigo de bower, además de mi propio script para mi aplicación. Dado que va a enumerar el orden de estos scripts en algún lugar, ¿por qué no simplemente enumerarlos en su archivo Gulp? Para los nuevos desarrolladores en su proyecto, es bueno que todos los puntos finales de su script estén listados aquí. Puedes hacer esto con gulp-add-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']);

Nota: jQuery y Bootstrap se agregaron con fines de demostración del pedido. Probablemente sea mejor usar CDN para aquellos, ya que son muy utilizados y los navegadores ya podrían tenerlos en caché de otros sitios.

Prueba la serie de transmisiones . Funciona como merge-stream / event-stream.merge () excepto que en lugar de intercalar, se agrega al final. No requiere que especifique el modo de objeto como streamqueue , por lo que su código sale más limpio.

var series = require('stream-series');

gulp.task('minifyInOrder', function() {
    return series(gulp.src('vendor/*'),gulp.src('extra'),gulp.src('house/*'))
        .pipe(concat('a.js'))
        .pipe(uglify())
        .pipe(gulp.dest('dest'))
});

merge2 parece ser la única herramienta de fusión de flujo ordenada en funcionamiento y mantenida en este momento.

Actualización 2020

Las API siempre cambian, algunas bibliotecas se vuelven inutilizables o contienen vulnerabilidades, o sus dependencias contienen vulnerabilidades que no se arreglan durante años. Para manipulaciones de archivos de texto, es mejor que use scripts personalizados de NodeJS y bibliotecas populares como globbyy fs-extrajunto con otras bibliotecas sin envoltorios Gulp, Grunt, etc.

import globby from 'globby';
import fs from 'fs-extra';

async function bundleScripts() {
    const rootPaths = await globby('./source/js/*.js');
    const otherPaths = (await globby('./source/**/*.js'))
        .filter(f => !rootFiles.includes(f));
    const paths = rootPaths.concat(otherPaths);

    const files = Promise.all(
        paths.map(
            // Returns a Promise
            path => fs.readFile(path, {encoding: 'utf8'})
        )
    );

    let bundle = files.join('\n');
    bundle = uglify(bundle);
    bundle = whatever(bundle);
    bundle = bundle.replace(/\/\*.*?\*\//g, '');

    await fs.outputFile('./build/js/script.js', bundle, {encoding: 'utf8'});
}

bundleScripts.then(() => console.log('done');

Un método alternativo es usar un complemento Gulp creado específicamente para este problema. https://www.npmjs.com/package/gulp-ng-module-sort

Le permite ordenar sus scripts agregando un .pipe(ngModuleSort())como tal:

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

Asumiendo una convención de directorio de:

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

¡Espero que esto ayude!

Para mí tenía natualSort () y angularFileSort () en la tubería que estaba reordenando los archivos. Lo quité y ahora funciona bien para mí.

$.inject( // app/**/*.js files
    gulp.src(paths.jsFiles)
      .pipe($.plumber()), // use plumber so watch can start despite js errors
      //.pipe($.naturalSort())
      //.pipe($.angularFilesort()),
    {relative: true}))

Solo uso gulp-angular-filesort

function concatOrder() {

    return gulp.src('./build/src/app/**/*.js')
        .pipe(sort())
        .pipe(plug.concat('concat.js'))
        .pipe(gulp.dest('./output/'));
}

Estoy en un entorno de módulo donde todos son dependientes del núcleo que usan gulp. Entonces elcore módulo debe agregarse antes que los demás.

Lo que hice:

1. Mueve todos los scripts a una srccarpeta
2. Solo gulp-renametu coredirectorio para_core

3. trago está manteniendo el orden de tu gulp.src, mi concat se srcve así:

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

Obviamente, tomará el _primer directorio de la lista (¿clasificación natural?).

Nota (angularjs): luego uso gulp-angular-extender para agregar dinámicamente los módulos al coremódulo. Compilado se ve así:

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

Donde Admin y Productos son dos módulos.

si desea solicitar dependencias de bibliotecas de terceros, intente wiredep . Este paquete básicamente verifica la dependencia de cada paquete en bower.json y luego los conecta por usted.

Probé varias soluciones desde esta página, pero ninguna funcionó. Tenía una serie de archivos numerados que simplemente quería ordenar por nombre de carpeta alfabético, por lo que cuando se canalizaba aconcat() estarían en el mismo orden. Es decir, preservar el orden de la entrada global. Fácil, verdad?

Aquí está mi código específico de prueba de concepto ( printes solo para ver el orden impreso en el 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 razón de la locura de gulp.src? Determiné que se gulp.srcestaba ejecutando de forma asincrónica cuando pude usar una sleep()función (usando un.map de sueño incrementado por índice) para ordenar la salida de la secuencia correctamente.

El resultado del asíncrono de los directorios srcmedios con más archivos vino después de los directorios con menos archivos, porque tomaron más tiempo procesarlos.

En mi configuración de gulp, primero estoy especificando los archivos del proveedor y luego especificando todo (más general), en segundo lugar. Y coloca con éxito al vendedor js antes que otras cosas personalizadas.

gulp.src([
  // vendor folder first
  path.join(folder, '/vendor/**/*.js'),
  // custom js after vendor
  path.join(folder, '/**/*.js')
])    

Aparentemente, puede pasar la opción "nosort" a gulp.src gulp.src .