同步grunt.js任務執行

Question

我正在嘗試通過gruntjs提取頂層復數頁的關鍵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

嘗試在for循環中更改var聲明，讓

您可以使用let關鍵字在for循環范圍內在本地綁定變量。 -https://developer.mozilla.org/zh-CN/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' );

    }
}