Erstellen von Aufgaben mit einer Schleife [Schluck]

Question

Ich versuche, Aufgaben dynamisch zu erstellen (Minify und Concat) basierend auf jsFiles Objekt. Der Schlüssel gibt den Zieldateinamen an und das Array enthält die Quelldateien. Wenn ich schlucke, sehe ich, dass alle Aufgabennamen laufen, aber es schreibt nur den letzten Schlüssel, der in diesem Fall group2.js ist. Was ist hier falsch?

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

Lösung auf jslinterrors.com/dont-make-functions-within-a-loop basiert:

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 2

Erfassung der Wert von 'Schlüssel' Variable bei jeder Iteration mit IIFE. In Ihrem Beispiel ist im Moment der Concat-Aufruf Schleife bereits beendet und Variable Schlüssel wird den letzten Wert haben.

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

} 

Ausführliche Erklärung siehe diese function closures - Vermeidung des Referenz Problem Abschnitt

Answer 3

Eine weitere Option ist funktional Array Looping Funktionen mit Object.keys kombiniert zu verwenden, etwa so:

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

ich so fühlen ist ein bisschen sauberer, weil Sie die Schleife und die Funktion an der gleichen Stelle haben, also ist es einfacher zu pflegen.

Answer 4

cmancre Lösung funktionieren ... aber hier ist die modifizierte und eine Arbeits ich zur Zeit mit:

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

Gulp # 4.0 verwenden, ich mag die Verwendung von gulp.parallel(), wie zB:

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

Arbeiten für mich und ich liebe es! Danke an OverZealous, mir den Weg gezeigt zu haben.