Question

我尝试根据 jsFiles 对象动态创建任务（缩小和连接）。 键将提供目标文件名，数组包含src文件。当我运行gulp时，我看到所有正在运行的任务名称，但它只写了最后一个键，在这种情况下是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);

Answer 1

另一个选择是使用与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'));
   });
});

我觉得这有点干净，因为你在同一个地方有循环和功能，所以它更容易维护。

Answer 2

使用IIFE在每次迭代时捕获'key'变量的值。在您的示例中，在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);

}

有关详细说明，请参阅此function closures - 避免参考问题部分

Answer 3

使用Gulp＃4.0，我喜欢使用gulp.parallel（），例如：

NavigationController.View.SetNeedsLayout();
NavigationController.View.LayoutIfNeeded();

为我工作，我喜欢它！感谢OverZealous给我指路。

Answer 4

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

Answer 5

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

使用循环创建任务[gulp]

5 个答案: