Bir döngü kullanarak görevler oluşturma [gulp]

Question

Dinamik olarak jsFiles nesnesini temel alan görevler (minify ve concat) oluşturmaya çalışıyorum. anahtarı hedef dosya adını verecektir ve dizi, src dosyalarını içerir. Ben gulp koştuğumda tüm görev isimlerini görüyorum ama sadece bu durumda group2.js olan son anahtarı yazıyor. Burada neyin var? jslinterrors.com/dont-make-functions-within-a-loop dayalı

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

Çözüm:

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

Yakalama hayatını kullanılarak her tekrarında 'anahtar' değişkeninin değeri. Örneğinizde, concat çağırma döngüsü anında zaten bitmiş olacak ve değişken anahtar son değere sahip olacak. ayrıntılı bir açıklama için

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

} 

bakınız bu function closures -

Answer 3

Başka bir seçenek, Object.keys ile kombine fonksiyonel dizi döngü işlevlerini kullanabilirsiniz şöyle etmektir Referans Sorun bölümünü kaçınmak:

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

böyle hissediyorum biraz daha temiz, çünkü aynı yerde döngü ve fonksiyon var, bu yüzden bakımı daha kolay. Burada

Answer 4

cmancre çözüm çalışmaları ince ... ama modifiye ve ben şu anda kullanıyorum birini hallediyor:

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 kullanarak, örneğin gulp.parallel() kullanımını ister:

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

Benim için çalışıyorum ve bunu seviyorum! Bana yol göstermek için OverZealous için teşekkürler.