Question

我正在使用Gulp自动制作横幅广告。我有一个文件夹列表（project.banners）和一组应该在每个文件夹上运行的任务。

由于我对Gulp的了解有限，我无法弄清楚如何自动完成这项工作。现在我必须手动更新var banner以指向一个特定文件夹。

我知道StackOverflow上有几个类似的问题，但是找不到任何适合或解决我问题的人，而且我使用forEach循环的试验只会导致错误。

示例：

// Settings
var project = {
    title       : "Client - Project",
    devPath     : "dev/client/banner/", 
    banners : [
        "180x500",
        "580x400",
        "468x468"
    ]
}

// Choose which banner/folder to Gulp (should be set by a loop!!?)
var banner = project.banners[0]; 

// Run tasks
gulp.task('default', function(callback) {
    runSequence(
        'css', 
        'html',
        'zip',
        callback
    );
});

// Example task
gulp.task('css', function() {
  return gulp.src(devPath + banner + '/style.css')   
    .pipe(minifycss())
    .pipe(gulp.dest('dist/temp/' + banner + '/'))
});

Answer 1

根据official gulp recipe上发现的迹象，我认为这样的事情应该有效，但我还没有测试过。

// ...
var fs = require('fs');
var path = require('path');

// ...

function getFolders(dir) {
    return fs.readdirSync(dir)
      .filter(function(file) {
        return fs.statSync(path.join(dir, file)).isDirectory();
      });
}

gulp.task('banners', function() {
  // get all folders inside project.devPath, if you need specific 
  // folders maybe you should wrap them inside another
  var folders = getFolders(project.devPath);

  return folders.map(function(folder) {
    // .map runs this action on each folder and returns the stream
    return gulp.src(project.debPath + folder + '/style.js')
      .pipe(minifycss())
      .pipe(gulp.dest('dist/temp/' + folder + '/'));
  });
});

Answer 2

您可能会为每个横幅维度生成一个新任务，并在默认任务中单独调用它们。

project.banners.forEach(function (banner /* <- this will be "180x500" the first time, "580x400" the next time etc. */ ) {
  gulp.task(banner, function () {
    return gulp.src(devPath + banner + '/style.css')   
      .pipe(minifycss())
      .pipe(gulp.dest('dist/temp/' + banner + '/'));
  });
});

然后在默认任务中运行：

runSequence.apply(this, project.banners.concat(['html', 'zip', callback]));

执行.apply（）会将数组作为单独的参数发送

Answer 3

作为参考，我最终这样做了：

循环浏览所有横幅，并使用横幅广告作为变量调用自定义函数（＆＃39; createBanner＆＃39;）。
使用函数内的动态任务名创建任务。

按顺序运行任务。

// Settings
var project = {
    title       : "Client - Project",
    devPath     : "dev/client/banner/", 
    banners : [ 
        // Array with banners (= folder names)
        "180x500",
        "580x400",
        "468x468"
    ]
}

// Place all tasks inside this function - receives banner/foldername
function createBanner(banner) {

    // Example task - with dynamic taskname
    gulp.task('css_' +  banner, function() {
      return gulp.src(devPath + banner + '/style.css')   
        .pipe(minifycss())
        .pipe(gulp.dest('dist/temp/' + banner + '/'))
    });  

    // ... Other tasks

    // Run tasks in sequence
    runSequence(
        'css_' + banner,
        'html_' + banner,
        'zip_' + banner
    );        

}          

// Default task
gulp.task('default', function(callback) {

    // Loop through all banners - call function with current banner as variable
    for (var i = 0; i < project.banners.length; i++) {
        createBanner(project.banners[i]);
    };

});

Gulp - 每个文件夹运行一次任务

3 个答案: