同步grunt.js任務執行

Question

我試圖通過gruntjs爲penthouse提取幾個頁面的關鍵CSS。我猜有些東西是錯誤的，因爲在執行任何任務之前，我的調試消息會打印整個頁面數組。這導致始終使用相同的配置生成相同的文件。

grunt.registerTask('critical-css',function() { 
    grunt.log.writeln('Extracting critical css for initial view'); 

    var pages = grunt.config('cfg.criticalCss.pages'), 
     viewports = grunt.config('cfg.criticalCss.viewports'); 

    for (var i = pages.length - 1; i >= 0; i--) { 

     grunt.log.writeln('Processing: ' + pages[i].name); 

     for (var a = viewports.length - 1; a >= 0; a--) { 

      grunt.config.set('ph.server', grunt.config('cfg.criticalCss.server')); 
      grunt.config.set('ph.urlToAnalyse', pages[i].url); 
      grunt.config.set('ph.inFile', pages[i].in); 
      grunt.config.set('ph.outFile', pages[i].out + '-' + viewports[a].name + '.css'); 
      grunt.config.set('ph.width', viewports[a].width); 
      grunt.config.set('ph.height', viewports[a].height); 

      // run the penthouse task with custom config 
      grunt.task.run('penthouse'); 

     } 
    } 
}); 

Answer 1

試着改變你的VAR聲明在for循環，讓

您可以使用let關鍵字在for循環範圍的本地綁定變量。 - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let#let-scoped_variables_in_for_loops

for (let i = pages.length - 1; i >= 0; i--) { 

    grunt.log.writeln('Processing: ' + pages[i].name); 

    for (let a = viewports.length - 1; a >= 0; a--) { 

     grunt.config.set('ph.server', grunt.config('cfg.criticalCss.server')); 
     grunt.config.set('ph.urlToAnalyse', pages[i].url); 
     grunt.config.set('ph.inFile', pages[i].in); 
     grunt.config.set('ph.outFile', pages[i].out + '-' + viewports[a].name + '.css'); 
     grunt.config.set('ph.width', viewports[a].width); 
     grunt.config.set('ph.height', viewports[a].height); 

     // run the penthouse task with custom config 
     grunt.task.run('penthouse'); 

    } 
}