A quick little breakdown: I'm setting up a boilerplate. At the moment I have Gulp converting scss to css via gulp-sass and then after I use critical to get the above the fold CSS & embed it in the head via . Initially it worked the problem came after using loadCSS in conjunction. It started wrapping noscript tags inconveniently round both the embedded CSS & loadCSS script & noscript.
After reverting from my use of loadCSS on the src index.html file, when I "gulp" it still outputs the cached loadCSS scripts & the (which loadCSS requires).
The funny thing is my src has a normal link tag with the href to the css file. but it is outputting to the target file everything the way I wanted it the critical css, loadCSS script and noscript encasing the link. It's weird.
I think its a cache issue with gulp or critical. I've cleared the npm cache but had no luck.I don't believe it is a bug. Question: I need to know what is causing this cache problem and how to fix it.
My critical gulp task:
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
});});