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.