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

    } 
}