una - event loop javascript

creando tareas usando un loop

Question

Intento crear dinámicamente tareas (minify y concat) basadas en el objeto jsFiles . La clave dará el nombre del archivo de destino y la matriz contiene los archivos src . Cuando ejecuto gulp, veo que se ejecutan todos los nombres de las tareas, pero solo escribe la última clave que es group2.js en este caso. ¿Qué pasa aquí?

// imports here

var jsFiles = 
{
    group1:[file1.js,file2.js],
    group2:[file2.js,file3.js]
};

for (var key in jsFiles)
{
    gulp.task(key, function() {
        return gulp.src(jsFiles[key])
        .pipe(jshint())
        .pipe(uglify())
        .pipe(concat(key + ''.js''))  // <- HERE
        .pipe(gulp.dest(''public/js''));
    });
}

var defaultTasks = [];
for (var key in jsFiles)
{
    defaultTasks.push(key);
}
gulp.task(''default'', defaultTasks);

Answer 1

Capture el valor de la variable ''clave'' en cada iteración usando IIFE. En su ejemplo, en el momento del ciclo de invocación de concat ya habrá finalizado y la clave variable tendrá el último valor.

for (var key in jsFiles)
{
    (function(key) {
        gulp.task(key, function() {
            return gulp.src(jsFiles[key])
                .pipe(jshint())
                .pipe(uglify())
                .pipe(concat(key + ''.js''))  // <- HERE
                .pipe(gulp.dest(''public/js''));
        });

    })(key);

}

Para una explicación detallada, vea los cierres de esta función - Evitar la sección Problema de referencia

Answer 2

Otra opción es usar funciones de bucle de matriz funcional combinadas con Object.keys , de esta manera:

var defaultTasks = Object.keys(jsFiles);

defaultTasks.forEach(function(taskName) {
   gulp.task(taskName, function() {
       return gulp.src(jsFiles[taskName])
          .pipe(jshint())
          .pipe(uglify())
          .pipe(concat(key + ''.js''))
          .pipe(gulp.dest(''public/js''));
   });
});

Siento que esto es un poco más limpio, porque tienes el bucle y la función en el mismo lugar, por lo que es más fácil de mantener.

Answer 3

Solución basada en jslinterrors.com/dont-make-functions-within-a-loop:

var jsFiles = 
{
    group1:[file1.js,file2.js],
    group2:[file2.js,file3.js]
};

function createTask(key)
{
   return gulp.src(jsFiles[key])
        .pipe(jshint())
        .pipe(uglify())
        .pipe(concat(key + ''.js''))
        .pipe(gulp.dest(''public/js''));

}

for (var key in jsFiles)
{
    createTask(key);
}

var defaultTasks = [];
for (var key in jsFiles)
{
    defaultTasks.push(key);
}
gulp.task(''default'', defaultTasks);

Answer 4

La solución cmancre funciona bien ... pero aquí la modificada y funcional que estoy usando actualmente:

var jsFiles = 
{
    group1:[file1.js,file2.js],
    group2:[file2.js,file3.js]
};

var defaultTasks = [];

function createTask(key)
{
    gulp.task(key, function() {
        return gulp.src(jsFiles[key])
            .pipe(uglify())
            .pipe(concat(key + ''.js''))
            .pipe(rename({suffix: ".min"})) //Will create group1.min.js
            .pipe(gulp.dest(''./assets/js''));
    });
}

for (var key in jsFiles)
{
    createTask(key);
    defaultTasks.push(key);
}

gulp.task(''default'', defaultTasks, function(){
    for (var key in jsFiles)
    {
        //Will watch each js defined in group1 or group2
        gulp.watch(jsFiles[key], [key]) 
    }
});

Answer 5

Usando Gulp # 4.0, me gusta el uso de gulp.parallel () como:

var plugins = require(''gulp-load-plugins'');
var $ = plugins();

var jsFiles = {
   // Libraries required by Foundation
   "jquery" : [
      "bower_components/jquery/dist/jquery.js",
      "bower_components/motion-ui/dist/motion-ui.js",
      "bower_components/what-input/dist/what-input.js"
   ],
   "angular" : [
      "bower_components/angular/angular.min.js",
      "bower_components/angular-animate/angular-animate.min.js",
      "bower_components/angular-aria/angular-aria.min.js",
      "bower_components/angular-material/angular-material.min.js",
      "bower_components/angular-messages/angular-messages.min.js",
      "bower_components/angular-sanitize/angular-sanitize.min.js",
      "bower_components/angular-ui-i18n/angular-ui-i18n.min.js"
   ],
   // Core Foundation files
   "foundation-sites" : [
      "bower_components/foundation-sites/dist/js/foundation.js"
   ],
   // Dropzone Library
   "dropzone" : [
      "bower_components/dropzone/dist/dropzone.js",
      "bower_components/ng-dropzone/dist/ng-dropzone.min.js"
   ]
};

var defaultTasks = Object.keys(jsFiles);

defaultTasks.forEach(function (libName) {
   gulp.task( ''scripts:''+libName, function () {
      return gulp.src(jsFiles[libName])
         //.pipe($.jshint()) // if you want it
         //.pipe($.uglify()) // if you like it
         //.pipe($.concat(libName+''.js'')) // .min.js if you Uglified it
         .pipe(gulp.dest(''dist/lib/''+libName));
   });
});

gulp.task( ''bundle_javascript_dependencies'',
   gulp.parallel(
      defaultTasks.map(function(name) { return ''scripts:''+name; })
   )
);

gulp.task(''build'',
   gulp.series(
      ''clean'',
      gulp.parallel( /* Any other task of function */ ''bundle_javascript_dependencies'' )
   )
);

¡Trabajando para mí y me encanta! Gracias a OverZealous por mostrarme el camino.