asp.net webforms gulp task-runner-explorer critical-css

Write output from Gulp task into .Masterpage/.aspx page

I'm using critical to generate Critical path CSS for my site. I have a gulp task set up as follows:

gulp.task('critical-css', function () {
    critical.generate({
        base: 'CriticalCss/',
        inline: false,
        src: 'index.html',
        dest: 'critical.min.css',
        minify: true,
        width: 320,
        height: 480
    }).then(function (output) {
        // Take 'output' and place it in masterpage
    });
});

I'm wondering if it's possible to take the value of the output parameter, which is my Critical CSS, and inject this into my Masterpage through gulp inside of an inline <style> tag?

I've tried using my Masterpage as the dest property however this doesn't work as the source file is different due to it being made up of the server generated HTML. I cannot use the Masterpage as the source file either as it's not a true representation of what is rendered to the user for obvious reasons.

Would something like html-replace work for this?

Solution

So I managed to do this with gulp-inject, it allows you to dynamically inject files or file contents into your pages pretty easily.

Here's my final gulp task:

gulp.task('critical-css', function () {
    critical.generate({
        base: 'CriticalCSS/',
        inline: false,
        src: 'index.html',
        dest: 'critical.min.css',
        minify: true,
        width: 320,
        height: 480
    })
    .then(function (output) {
        gulp.src('./CMSTemplates/Web/MasterPages/Root.Master')
       .pipe(inject(gulp.src(['./CriticalCSS/*.css']), {
           starttag: '<!-- inject:{{path}} -->',
           transform: function (filePath, file) {
               return '<style type="text/css">'
                        + output +
                      '</style>';
           }
       }))
       .pipe(gulp.dest('./CMSTemplates/Web/MasterPages'));
    });
});

It ends up replacing this:

<!-- inject:/CriticalCSS/critical.min.css-->
<!-- endinject -->

With this:

<!-- inject:/CriticalCSS/critical.min.css-->
<style type="text/css">@charset "UTF-8";img{max-width:100%}img{border:0}body{padding:0}img{height:auto}html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;box-sizing:border-box}header,nav{display:block}img{-ms-interpolation-mode:bicubic;display:inline-block;vertical-align:middle}input{color:inherit;font:inherit;margin:0}body{-webkit-font-smoothing:antialiased}a,i{line-height:inherit}ul{line-height:1.6}input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}.foundation-mq{font-family:"small=0em&medium=40.125em&large=64.125em&xlarge=75em&xxlarge=90em"}*,::after,::before{box-sizing:inherit}body{margin:0;-moz-osx-font-smoothing:grayscale}.clearfix::after{clear:both}div,form,li,ul{margin:0;padding:0}ul{margin-left:1.25rem}ul{margin-bottom:1rem}i{font-style:italic}a{background-color:transparent;text-decoration:none}a img{border:0}ul{list-style-position:outside}li{font-size:inherit}ul{list-style-type:disc}.menu{list-style-type:none}.button{text-align:center}.menu>li,.menu>li>a i,.menu>li>a i+span{vertical-align:middle}.button,.menu>li>a{line-height:1}.button{-webkit-appearance:none;border-radius:0;margin:0 0 1rem;background-color:#2199e8}.menu a{margin-bottom:0}.menu{margin:0}.menu>li>a{display:block;padding:.7rem 1rem}.menu>li>a i{margin-right:.25rem;display:inline-block}.menu>li{display:table-cell}.menu.vertical>li{display:block}body,html{height:100%}@media screen and (max-width:64.0625em){.show-for-large{display:none!important}}.clearfix::after,.clearfix::before{content:' ';display:table}body,html{background:#eeedea}body,html{color:#000;letter-spacing:0}body,html{font:100%;font-family:"Trebuchet MS";font-size:100%;font-style:normal;line-height:1.5rem}a{color:#000}.header__wrap .menu a,.header__wrap .menu span{font-family:ApercuProBold,"Trebuchet MS"}@font-face{font-family:ApercuProBold;src:url(/web/css/fonts/ApercuPro-Bold-Web.eot);src:url(/web/css/fonts/ApercuPro-Bold-Web.eot?#iefix) format("embedded-opentype"),url(/web/css/fonts/ApercuPro-Bold-Web.woff2) format("woff2"),url(/web/css/fonts/ApercuPro-Bold-Web.woff) format("woff"),url(/web/css/fonts/ApercuPro-Bold-Web.ttf) format("truetype"),url(/web/css/fonts/ApercuPro-Bold-Web.svg#ApercuPro-Bold) format("svg");font-weight:700;font-style:normal}@font-face{font-family:icomoon;src:url(/web/css/fonts/icomoon/icomoon.eot?h3styg);src:url(/web/css/fonts/icomoon/icomoon.eot?h3styg#iefix) format("embedded-opentype"),url(/web/css/fonts/icomoon/icomoon.ttf?h3styg) format("truetype"),url(/web/css/fonts/icomoon/icomoon.woff?h3styg) format("woff"),url(/web/css/fonts/icomoon/icomoon.svg?h3styg#icomoon) format("svg");font-weight:400;font-style:normal}.header__menu .destinations-menu-item:after{content:""!important;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.header{z-index:999;width:100%;height:45px;position:fixed;background:#000}.header__wrap{position:relative;height:100%}.header__section{width:auto;display:inline-block;height:100%}.header__wrap .menu a{padding-right:.5rem;padding-left:.5rem;text-decoration:none}.header__wrap .menu a,.header__wrap .menu span{color:#fff;font-size:.875rem;letter-spacing:0}.header__logo{position:relative;top:10px;float:left}.header__logo .logo{display:block}@media only screen and (min-width:40.063em) and (max-width:64em){.header__logo{width:60px}}.header__menu{position:relative;width:100%;height:100%}.header__menu ul.menu{position:absolute;display:none}.header__menu .parallel-logo>i{display:none}.header__menu .parallel-logo>span{text-indent:100%;white-space:nowrap;overflow:hidden;margin-left:10px;background-image:url(/web/images/logos/logo_parallel.svg);background-repeat:no-repeat;width:62px;height:13px;display:inline-block;position:relative;top:1px}.header__menu .destinations-menu-item{position:relative;padding-right:12px!important;margin-right:12px!important;text-decoration:none}.header__menu .destinations-menu-item:after{font-family:icomoon;font-size:.75rem;color:#fff;position:absolute;top:13px;right:-3px;display:inline-block;-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg)}@-moz-document url-prefix(){.header__wrap .parallel-logo{padding-top:14px}.header__menu .destinations-menu-item:after{top:15px}}@media only screen and (min-width:40.063em) and (max-width:64em){.header__menu .destinations-menu-item:after{top:11px}}@media only screen and (min-width:40.063em) and (max-width:64em){.header__menu{height:90px;width:100%}}@media (min-width:1024px) and (max-width:1200px){.header__menu ul.menu{padding-left:10px}}.button{-webkit-transform:perspective(1px) translateZ(0);box-shadow:0 0 1px transparent}.form .error{border:2px solid #e85460!important}.button:after{content:""!important;line-height:inherit}.button{color:#000;display:inline-block;overflow:hidden;letter-spacing:0;vertical-align:middle}.button,.button:after{font-size:.875rem}.button{background:#f7e066;font-family:ApercuProBold,"Trebuchet MS";padding:17px 24px 17px 20px;margin-bottom:.3125rem;border:none;text-transform:uppercase;transform:perspective(1px) translateZ(0);position:relative}.button:after{font-weight:400;text-transform:none;speak:none;font-style:normal;font-variant:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.button:after{font-family:icomoon;color:#000}.button:before{content:"";z-index:-1;height:3px;left:0;bottom:0}.button:before{position:absolute;right:100%;background:#000}.button:after{position:absolute;right:19px;height:14px;top:50%;margin-top:-7px}.newsletter-modal span.error{color:#fff;background:#e85460;padding:12px 0 12px 40px;line-height:1;position:relative;width:100%;float:left;margin-bottom:20px}.newsletter-modal span.error::before{content:'!';width:20px;height:20px;display:block;position:absolute;border:2px solid #fff;border-radius:50%;text-align:center;left:12px;top:10px;font-size:15px}select.uppercase option{text-transform:uppercase}#destinationDropdown.destination-dropdown-menu{z-index:99999;background:#eeedea;color:#000;position:absolute;top:90px;left:22px;padding:15px;display:none;border:1px solid #ddd}#destinationDropdown.destination-dropdown-menu ul{padding:0;margin:0;top:0}#destinationDropdown.destination-dropdown-menu li{outline:0}#destinationDropdown.destination-dropdown-menu li a{text-transform:uppercase;color:#000;font-family:ApercuProBold,"Trebuchet MS";font-size:1.125rem;outline:0;padding:0}#destinationDropdown.destination-dropdown-menu .button{margin-bottom:0;margin-top:15px;width:100%;text-align:left}#destinationDropdown.destination-dropdown-menu .menu-item{margin-bottom:5px}#destinationDropdown.destination-dropdown-menu .menu-item span{color:#000;font-size:20px;padding:0 7px}#stickyForm .select select option{color:#000}#stickyForm .form input{width:100%;margin-bottom:.3125rem}</style>
<!-- endinject -->

In my Masterpage file, hopefully this helps someone else.