creazione di attività utilizzando un ciclo [gulp]

Question

Sto provando a creare dinamicamente le attività (minify e concat) in base all'oggetto jsFiles. La chiave darà il nome del file di destinazione e l'array contiene i file src. Quando eseguo gulp vedo tutti i nomi delle attività in esecuzione, ma in questo caso scrive solo l'ultima chiave che è group2.js. Cosa c'è che non va qui?

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

Soluzione basata su 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 2

cattura il valore della variabile 'chiave' in ogni iterazione utilizzando IIFE. Nel tuo esempio, al momento del ciclo di chiamata concat sarà già finito e la chiave variabile avrà l'ultimo valore.

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

} 

Per una spiegazione dettagliata vedere questo function closures - evitando la sezione di riferimento Problema

Answer 3

Un'altra opzione è quella di utilizzare le funzioni funzionali matrice loop in combinazione con Object.keys, in questo modo:

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

mi sento come questo è un po 'più pulito, perché hai il loop e la funzione nello stesso posto, quindi è più facile da mantenere.

Answer 4

cmancre soluzione funziona bene ... ma qui il modificato e lavorare uno Attualmente sto usando:

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

Utilizzando Gulp # 4.0, mi piace l'uso di gulp.parallel() come ad esempio:

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

Lavoro per me e lo adoro! Grazie a OverZealous per avermi mostrato la strada.