Gulp - 每個文件夾運行一次任務

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

做。適用（）將數組作爲發送單獨的參數

Answer 3

供參考，最後我做這個：通過所有橫幅

1. 循環，並呼籲與旗幟可變自定義函數（「createBanner」）。
2. 使用功能內的動態任務名稱創建任務。

3. 按順序運行任務。

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