Tworzenie zadań za pomocą pętli [gulp]

Question

Próbuję dynamicznie tworzyć zadania (minify i concat) na podstawie obiektu jsFiles. Klucz poda docelową nazwę pliku, a tablica zawiera pliki src:. Kiedy uruchamiam łyk, widzę wszystkie nazwy zadań, które są uruchamiane, ale zapisuje tylko ostatni klucz, który jest w tym przypadku group2.js. Co jest nie tak?

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

Rozwiązanie oparte na 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

przechwytywania wartość 'klucza' zmiennej w każdej iteracji wykorzystaniem Iife. W twoim przykładzie, pętla inwokacji zostanie zakończona, a klucz zmienny będzie miał ostatnią wartość.

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

} 

Szczegółowe wyjaśnienie zobaczyć function closures - Unikanie punkt odniesienia Problem

Answer 3

Inną opcją jest użycie funkcjonalnych tablicy zapętlenie funkcje w połączeniu z Object.keys, tak:

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

czuję się jak ten jest trochę czystszy, ponieważ masz pętlę i funkcję w tym samym miejscu, więc łatwiej ją utrzymać.

Answer 4

cmancre praca rozwiązanie w porządku ... ale tu zmodyfikowany i pracuje jeden obecnie używam:

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

Korzystanie Gulp # 4.0, lubię użycie gulp.parallel() takich jak:

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

Pracuj dla mnie i kocham to! Podziękowania dla OverZealous za pokazanie mi drogi.