javascript - compile - gulp-clean-css

Guiones de Concat en orden con Gulp

Question

Supongamos, 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 de backbone.js .

¿Cómo hago para que los scripts se junten 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 las secuencias de comandos en mi source/index.html , pero como los archivos están organizados por orden alfabético, gulp se combinará con underscore.js después de backbone.js , y el orden de los scripts en mi source/index.html no importa, mira los archivos en el directorio.

Entonces, ¿alguien tiene una idea sobre esto?

La mejor idea que tengo es cambiar el nombre de las secuencias de comandos del proveedor con 1 , 2 , 3 para darles el orden correcto, pero no estoy seguro de si esto me gusta.

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

Answer 1

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

Answer 2

Estoy en un entorno de módulo en el que todos son dependientes del núcleo utilizando gulp. Por lo tanto, el módulo core debe agregarse antes que los demás.

Lo que hice:

1. Mueva todos los scripts a una carpeta src
2. Simplemente gulp-rename el gulp-rename tu directorio core a _core

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

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

Obviamente, tomará el _ como el primer directorio de la lista (¿tipo natural?).

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

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

Donde la administración y los productos son dos módulos.

Answer 3

Hace poco tuve un problema similar con Grunt cuando construí 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 grunt. Por lo que parecía:

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

Y las cosas funcionaron Y Grunt es aparentemente lo suficientemente inteligente como para no incluir el mismo archivo dos veces.

Esto funciona igual con Gulp.

Answer 4

He usado el complemento de orden gulp pero no siempre es exitoso, como puede ver en mi módulo de nodos de orden de desbordamiento de pila con flujos combinados . Al navegar por los documentos de Gulp, encontré el módulo de streamque que funcionó 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é está debajo

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 5

La sort-stream también se puede usar para garantizar el orden específico de los archivos con gulp.src . Código de muestra que pone a backbone.js siempre como el último archivo en 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/''));
});

Answer 6

Otra cosa que ayuda si necesita algunos archivos después de un blob de archivos, es excluir archivos específicos de su glob, así:

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

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

Answer 7

Para mí tenía natualSort () y angularFileSort () en la tubería que estaba reordenando los archivos. Lo eliminé 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}))

Answer 8

Prueba stream-series . Funciona como merge-stream / event-stream.merge() excepto que en lugar de intercalar, se agrega al final. No requiere que especifiques el modo de objeto como streamqueue , para que tu código salga 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''))
});

Answer 9

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.

Answer 10

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

Answer 11

Tengo mis scripts organizados en diferentes carpetas para cada paquete que saque de bower, más mi propio script para mi aplicación. Ya que va a enumerar el orden de estos scripts en alguna parte, ¿por qué no solo enumerarlos en su archivo gulp? Para los nuevos desarrolladores en su proyecto, es bueno que todos los puntos finales de su script se enumeren 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 para fines de demostración de orden. Probablemente sea mejor usar CDN para aquellos ya que son ampliamente utilizados y los navegadores podrían tenerlos almacenados en caché desde otros sitios.

Answer 12

Un método alternativo es usar un plugin 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/));
});

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

Answer 13

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.

Answer 14

npmjs.com/package/merge2 parece ser la única herramienta de fusión de flujo ordenada que funciona y mantiene en este momento.