同步grunt.js任务执行

Question

I'm trying to extract the critical css for a couple of pages with penthouse via gruntjs. I guess something is wrong, since my debug message gets printed for the whole page array before any of the task actually is being executed. This results in always generating the same file with the same config.

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

try changing your var declarations in your for loop to let

You can use the let keyword to bind variables locally in the scope of for loops. - 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' );

    }
}