javascript start 用循環創建任務




npm gulp (4)

我試圖動態創建基於jsFiles對象的任務( minify和concat)。 密鑰將給出目標文件名,數組包含src文件 。 當我運行吞噬我看到所有的任務名稱正在運行,但它只寫在這種情況下最後一個鍵是group2.js。 這裡有什麼問題?

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

另一種選擇是使用與Object.keys結合的函數式數組循環函數,如下所示:

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

我覺得這是一個更清潔,因為你有循環和功能在同一個地方,所以更容易維護。


在每次迭代中使用IIFE捕獲“關鍵”變量的值。 在你的例子中,在concat調用的時候,循環已經完成了,變量鍵將會有最後一個值。

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

}

有關詳細說明,請參閱此函數閉包 - 避免參考問題部分


使用Gulp#4.0,我喜歡使用gulp.parallel(),比如:

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

為我工作,我愛它! 感謝OverZealous有指示我的方式。


cmancre解決方案工作正常...但這裡修改和工作之一,我目前正在使用:

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




gulp