Глоток Задача - вар Проход к следующей трубе

Question

У меня есть следующие задачи GULP

// global criticalCSS 
criticalCSS = ""; 

// Generate & Inline Critical-path CSS 
gulp.task('optimize:critical', ['styles'], function() { 
    critical.generate({ 
    base: config.critical.base, 
    src: 'index.html', 
    css: config.critical.css 
    }, function (err, output) { 
    // You now have critical-path CSS 
     console.log(output); 
     criticalCSS = output; 
    }); 
    return gulp.src(config.critical.base + '/*.html') 
    .pipe(plumber({ 
     errorHandler: onError 
    })) 
    .pipe(
     htmlreplace({ 
     'criticalCss': '<style>' + criticalCSS + '</style>', 
     }) 
    ) 
    .pipe(vinylPaths(del)) 
    .pipe(gulp.dest(config.critical.base)); 
}); 

я ожидал, что criticalCSS был во всем мире, содержащий вывод critical.generate. Консоль.log отображает вывод правильно. Но в

'criticalCss': '<style>' + criticalCSS + '</style>', 

criticalCSS возвращает пустую строку.

Как я могу решить эту проблему?

Answer 1

Просто выстрел в темноте, но похоже, что начальный критический вызов вызова выполняется асинхронно, а переменная criticalCSS не гарантируется надлежащим образом инициализирована.

Для того, чтобы переменная criticalCSS инициализируется, когда вы приступите к глотку поток части этой задачи, вы можете использовать обещание синтаксис критического плагина найти по адресу: https://www.npmjs.com/package/critical

Тем не менее, вам все еще нужно, чтобы глотка знать, когда задача завершена ... Вы можете использовать метод обратного вызова в сочетании с потоком событий, показанных на: Run code after gulp task done with all files чтобы глотком знать, когда задача завершена (если возникли ошибки):

gulp.task('optimize:critical', ['styles'], function(done) { 
    critical.generate({ 
    base: config.critical.base, 
    src: 'index.html', 
    css: config.critical.css}) 
    // Promise syntax that will run after critical has finished. 
    .then(function (output) { 
     // You now have critical-path CSS 
     console.log(output); 
     // criticalCSS = output; 
     var stream = gulp.src(config.critical.base + '/*.html') 
     .pipe(plumber({ 
     errorHandler: onError 
     })) 
     .pipe(
     htmlreplace({ 
      'criticalCss': '<style>' + output + '</style>', 
     }) 
    ) 
     .pipe(vinylPaths(del)) 
     .pipe(gulp.dest(config.critical.base)); 
     stream.on('end', function() { 
     done(); 
     }); 
     stream.on('error', function(err) { 
     done(err); 
     }); 
    // Error on the initial critical call 
    }).error(function(err){ 
    done(err); 
    }); 
}); 

В этой версии задачи вам не нужен даже крит переменная icalCSS.