同步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关键字在本地绑定变量。- 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' );

    }
}