簡単な内訳: 定型文を設定しています。現時点では、gulp -sassを介して scss を css に変換する Gulp を使用してから、 criticalを使用して上記の折り畳み CSS を取得し、 を介して head に埋め込みます。最初は、 loadCSSを組み合わせて使用した後に問題が発生しました。埋め込まれた CSS と loadCSS スクリプトと noscript の両方に不都合な形で noscript タグをラップし始めました。
src index.html ファイルでの loadCSS の使用から戻した後、「gulp」すると、キャッシュされた loadCSS スクリプトと (loadCSS が必要とする) が出力されます。
面白いことに、私の src には css ファイルへの href を持つ通常のリンク タグがあります。しかし、リンクを囲む重要なcss、loadCSSスクリプト、およびnoscriptを必要な方法でターゲットファイルにすべて出力しています。それは奇妙だ。
gulp または critical のキャッシュの問題だと思います。npm キャッシュをクリアしましたが、うまくいきませんでした。バグではないと思います。 質問: このキャッシュの問題の原因とその修正方法を知る必要があります。
私の重要な一気飲みの仕事:
gulp.task('makeCriticalCSS',['sassToCss'], function () {
critical.generateInline({
base: 'dist/public/',
src: 'index2.html',
css: ['./dist/public/css/app.css'],
width: 320,
height: 480,
htmlTarget: 'index.html',
// styleTarget: 'css/critical.css',
// extract: true,
minify: true
});});