tạo các tác vụ bằng cách sử dụng vòng lặp [gulp]

Question

Tôi đang cố gắng tạo động các tác vụ (thu nhỏ và concat) dựa trên đối tượng jsFiles. Phím sẽ cung cấp tên tệp đích và mảng chứa các tệp src. Khi tôi chạy gulp, tôi thấy tất cả các tên tác vụ đang được chạy nhưng nó chỉ ghi khóa cuối cùng là group2.js trong trường hợp này. Có gì sai ở đây?

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

Giải pháp dựa trên 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

Capture giá trị của biến 'chìa khóa' trên mỗi lần lặp sử dụng IIFE. Trong ví dụ của bạn, tại thời điểm vòng lặp cuộc gọi concat sẽ được hoàn thành và khóa biến sẽ có giá trị cuối cùng.

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

} 

Đối với giải thích chi tiết thấy điều này function closures - Tránh phần tham khảo Vấn đề

Answer 3

Một lựa chọn khác là sử dụng mảng looping chức năng chức năng kết hợp với Object.keys, như vậy:

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

tôi cảm thấy như thế này là một chút sạch hơn, bởi vì bạn có vòng lặp và chức năng ở cùng một nơi, do đó, nó dễ dàng hơn để duy trì.

Answer 4

cmancre giải pháp làm việc tốt ... nhưng ở đây các sửa đổi và làm việc một tôi hiện đang sử dụng:

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

Sử dụng Gulp # 4.0, tôi thích việc sử dụng gulp.parallel() như:

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

Làm việc cho tôi và tôi thích điều đó! Cảm ơn OverZealous đã chỉ đường cho tôi.