criando tarefas usando um loop

Eu estou tentando criar dinamicamente tarefas (minify e concat) com base no object jsFiles . A chave fornecerá o nome do arquivo de destino e o array conterá os arquivos src . Quando executo o gulp, vejo todos os nomes de tarefas sendo executados, mas apenas grava a última chave, que é group2.js neste caso. O que há de errado aqui?

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

Outra opção é usar funções de looping de matriz funcional combinadas com Object.keys , da seguinte forma:

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

Eu sinto que isso é um pouco mais limpo, porque você tem o loop e a function no mesmo lugar, então é mais fácil de manter.

Capture o valor da variável ‘key’ em cada iteração usando o IIFE. No seu exemplo, no momento do ciclo de chamada de concat já estará finalizado e a chave variável terá o ú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 uma explicação detalhada, veja este encerramento de funções - Evitando a seção Problema de Referência

Solução Cmancre funciona bem … mas aqui o modificado e funcional que estou usando atualmente:

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

Usando Gulp # 4.0, eu gosto do 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' ) ) ); 

Trabalhando para mim e eu amo isso! Obrigado ao OverZealous por me mostrar o caminho.

Solução baseada em 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); 
    Intereting Posts