Skip to content

Commit

Permalink
Bump critical
Browse files Browse the repository at this point in the history
  • Loading branch information
Ben Zörb committed Jun 17, 2020
1 parent 88cf971 commit ef666df
Show file tree
Hide file tree
Showing 10 changed files with 136 additions and 465 deletions.
397 changes: 46 additions & 351 deletions package-lock.json
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
},
"dependencies": {
"async": "^3.2.0",
"critical": "^2.0.0",
"critical": "^2.0.1",
"glob": "^7.1.6",
"lodash": "^4.17.15"
},
Expand Down
111 changes: 54 additions & 57 deletions tasks/critical.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,15 @@
* Licensed under the MIT license.
*/

'use strict';
"use strict";

const path = require('path');
const critical = require('critical');
const async = require('async');
const _ = require('lodash');
const glob = require('glob');
const path = require("path");
const critical = require("critical");
const { eachSeries } = require("async");
const _ = require("lodash");
const glob = require("glob");

module.exports = grunt => {
module.exports = (grunt) => {
/**
* Check wether a resource is external or not
* @param href
Expand All @@ -25,31 +25,31 @@ module.exports = grunt => {
}

grunt.registerMultiTask(
'critical',
'Extract & inline critical-path CSS from HTML',
function() {
"critical",
"Extract & inline critical-path CSS from HTML",
function () {
const done = this.async();
const options = this.options({
// Your base directory
base: ''
base: "",
});

process.setMaxListeners(0);

// Loop files array
// Iterate over all specified file groups.
async.eachSeries(
eachSeries(
this.files,
(f, next) => {
options.base = path.normalize(options.base || '');
options.base = path.normalize(options.base || "");

// Make filepath absolute
const absoluteBase = `${path.resolve(
options.base || './'
options.base || "./"
)}/`;

// Concat specified files.
let srcFiles = f.src.filter(filepath => {
let srcFiles = f.src.filter((filepath) => {
// Warn on and remove invalid source files (if nonull was set).
if (
!grunt.file.exists(filepath) &&
Expand All @@ -65,7 +65,7 @@ module.exports = grunt => {
});

srcFiles = srcFiles.concat(
f.orig.src.filter(filepath => {
f.orig.src.filter((filepath) => {
return isExternal(filepath);
})
);
Expand All @@ -80,7 +80,7 @@ module.exports = grunt => {

if (srcFiles.length > 1 && !grunt.file.isDir(f.dest)) {
grunt.log.warn(
'Destination needs to be a directory for multiple src files'
"Destination needs to be a directory for multiple src files"
);
return;
}
Expand All @@ -93,34 +93,32 @@ module.exports = grunt => {

options.css = _.chain(options.css)
.compact()
.map(css => {
.map((css) => {
return glob.sync(css, {
nosort: true
nosort: true,
});
})
.flatten()
.value();
}

grunt.log.debug('SOURCE', srcFiles);
grunt.log.debug('CSS', options.css);
grunt.log.debug("SOURCE", srcFiles);
grunt.log.debug("CSS", options.css);

async.eachSeries(
eachSeries(
srcFiles,
(src, cb) => {
const options_ = {
inline: !/\.(css|scss|less|styl)/.test(
path.extname(f.dest)
),
...options
};
async (src) => {
const inline = !/\.(css|scss|less|styl)/.test(
path.extname(f.dest)
);
const options_ = { inline, ...options };

if (isExternal(src)) {
options_.src = src;
} else {
options_.src = path
.resolve(src)
.replace(absoluteBase, '');
.replace(absoluteBase, "");
}

let destination = f.dest;
Expand All @@ -129,34 +127,33 @@ module.exports = grunt => {
destination = path.join(f.dest, options_.src);
}

grunt.log.debug('opts', options_);

critical
.generate(options_)
// eslint-disable-next-line promise/prefer-await-to-then
.then(output => {
const dirname = path.dirname(destination);

if (!grunt.file.isDir(dirname)) {
grunt.file.mkdir(dirname);
}

grunt.file.write(destination, output);
// Print a success message.
grunt.log.ok(
`File "${destination}" created.`
);
cb(null, output);
})
.catch(error => {
grunt.log.error(
`File "${destination}" failed.`,
error.message || error
);
cb(error);
});
grunt.log.debug("opts", options_);

try {
const { html, css } = await critical.generate(
options_
);

const output = inline ? html : css;
const dirname = path.dirname(destination);

if (!grunt.file.isDir(dirname)) {
grunt.file.mkdir(dirname);
}

grunt.file.write(destination, output);
// Print a success message.
grunt.log.ok(`File "${destination}" created.`);
return output;
} catch (error) {
grunt.log.error(
`File "${destination}" failed.`,
error.message || error
);
throw error;
}
},
error => {
(error) => {
if (error) {
grunt.fail.warn(`File "${f.dest}" failed.`);
grunt.log.warn(error.message || error);
Expand Down
13 changes: 5 additions & 8 deletions test/expected/index-dimensions.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,9 @@
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

<!-- build:css styles/main.css -->
<style>
@-ms-viewport{width:device-width}body{padding-top:20px;padding-bottom:20px}.header,.marketing{padding-left:15px;padding-right:15px}.header{border-bottom:1px solid #e5e5e5}.header h3{margin-top:0;margin-bottom:0;line-height:40px;padding-bottom:19px}.jumbotron{text-align:center;border-bottom:1px solid #e5e5e5}.jumbotron .btn{font-size:21px;padding:14px 24px}.marketing{margin:40px 0}@media screen and (min-width:768px){.container{max-width:730px}.header,.marketing{padding-left:0;padding-right:0}.header{margin-bottom:30px}.jumbotron{border-bottom:0}}html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}a{background:0 0}h1{margin:.67em 0;font-size:2em}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html{font-size:62.5%}body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.42857143;color:#333;background-color:#fff}a{color:#428bca;text-decoration:none}h1,h3,h4{font-family:inherit;font-weight:500;line-height:1.1;color:inherit}h1,h3{margin-top:20px;margin-bottom:10px}h4{margin-top:10px;margin-bottom:10px}h1{font-size:36px}h3{font-size:24px}h4{font-size:18px}p{margin:0 0 10px}.lead{margin-bottom:20px;font-size:16px;font-weight:200;line-height:1.4}.text-muted{color:#999}ul{margin-top:0;margin-bottom:10px}.container{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}@media (min-width:768px){.lead{font-size:21px}.container{width:750px}}@media (min-width:992px){.container{width:970px}}.row{margin-right:-15px;margin-left:-15px}.col-lg-6{position:relative;min-height:1px;padding-right:15px;padding-left:15px}@media (min-width:1200px){.container{width:1170px}.col-lg-6{float:left}.col-lg-6{width:50%}}.btn{display:inline-block;padding:6px 12px;margin-bottom:0;font-size:14px;font-weight:400;line-height:1.42857143;text-align:center;white-space:nowrap;vertical-align:middle;background-image:none;border:1px solid transparent;border-radius:4px}.btn-success{color:#fff;background-color:#5cb85c;border-color:#4cae4c}.btn-lg{padding:10px 16px;font-size:18px;line-height:1.33;border-radius:6px}.nav{padding-left:0;margin-bottom:0;list-style:none}.nav>li{position:relative;display:block}.nav>li>a{position:relative;display:block;padding:10px 15px}.nav-pills>li{float:left}.nav-pills>li>a{border-radius:4px}.nav-pills>li+li{margin-left:2px}.nav-pills>li.active>a{color:#fff;background-color:#428bca}.jumbotron{padding:30px;margin-bottom:30px;color:inherit;background-color:#eee}.jumbotron h1{color:inherit}.jumbotron p{margin-bottom:15px;font-size:21px;font-weight:200}.container .jumbotron{border-radius:6px}@media screen and (min-width:768px){.jumbotron{padding-top:48px;padding-bottom:48px}.container .jumbotron{padding-right:60px;padding-left:60px}.jumbotron h1{font-size:63px}}.container:after,.container:before,.nav:after,.nav:before,.row:after,.row:before{display:table;content:" "}.container:after,.nav:after,.row:after{clear:both}.pull-right{float:right!important}
</style>
<link rel="preload" href="styles/main.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles/main.css"></noscript>
<link rel="preload" href="styles/bootstrap.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles/bootstrap.css"></noscript>
<script>!function(n){"use strict";n.loadCSS||(n.loadCSS=function(){});var o=loadCSS.relpreload={};if(o.support=function(){var e;try{e=n.document.createElement("link").relList.supports("preload")}catch(t){e=!1}return function(){return e}}(),o.bindMediaToggle=function(t){var e=t.media||"all";function a(){t.addEventListener?t.removeEventListener("load",a):t.attachEvent&&t.detachEvent("onload",a),t.setAttribute("onload",null),t.media=e}t.addEventListener?t.addEventListener("load",a):t.attachEvent&&t.attachEvent("onload",a),setTimeout(function(){t.rel="stylesheet",t.media="only x"}),setTimeout(a,3e3)},o.poly=function(){if(!o.support())for(var t=n.document.getElementsByTagName("link"),e=0;e<t.length;e++){var a=t[e];"preload"!==a.rel||"style"!==a.getAttribute("as")||a.getAttribute("data-loadcss")||(a.setAttribute("data-loadcss",!0),o.bindMediaToggle(a))}},!o.support()){o.poly();var t=n.setInterval(o.poly,500);n.addEventListener?n.addEventListener("load",function(){o.poly(),n.clearInterval(t)}):n.attachEvent&&n.attachEvent("onload",function(){o.poly(),n.clearInterval(t)})}"undefined"!=typeof exports?exports.loadCSS=loadCSS:n.loadCSS=loadCSS}("undefined"!=typeof global?global:this);</script>
<style>@-ms-viewport{width:device-width}body{padding-top:20px;padding-bottom:20px}.header,.marketing{padding-left:15px;padding-right:15px}.header{border-bottom:1px solid #e5e5e5}.header h3{margin-top:0;margin-bottom:0;line-height:40px;padding-bottom:19px}.jumbotron{text-align:center;border-bottom:1px solid #e5e5e5}.jumbotron .btn{font-size:21px;padding:14px 24px}.marketing{margin:40px 0}@media screen and (min-width:768px){.container{max-width:730px}.header,.marketing{padding-left:0;padding-right:0}.header{margin-bottom:30px}.jumbotron{border-bottom:0}}html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}a{background:0 0}h1{margin:.67em 0;font-size:2em}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html{font-size:62.5%}body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.42857143;color:#333;background-color:#fff}a{color:#428bca;text-decoration:none}h1,h3,h4{font-family:inherit;font-weight:500;line-height:1.1;color:inherit}h1,h3{margin-top:20px;margin-bottom:10px}h4{margin-top:10px;margin-bottom:10px}h1{font-size:36px}h3{font-size:24px}h4{font-size:18px}p{margin:0 0 10px}.lead{margin-bottom:20px;font-size:16px;font-weight:200;line-height:1.4}.text-muted{color:#999}ul{margin-top:0;margin-bottom:10px}.container{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}@media (min-width:768px){.lead{font-size:21px}.container{width:750px}}@media (min-width:992px){.container{width:970px}}.row{margin-right:-15px;margin-left:-15px}.col-lg-6{position:relative;min-height:1px;padding-right:15px;padding-left:15px}@media (min-width:1200px){.container{width:1170px}.col-lg-6{float:left}.col-lg-6{width:50%}}.btn{display:inline-block;padding:6px 12px;margin-bottom:0;font-size:14px;font-weight:400;line-height:1.42857143;text-align:center;white-space:nowrap;vertical-align:middle;background-image:none;border:1px solid transparent;border-radius:4px}.btn-success{color:#fff;background-color:#5cb85c;border-color:#4cae4c}.btn-lg{padding:10px 16px;font-size:18px;line-height:1.33;border-radius:6px}.nav{padding-left:0;margin-bottom:0;list-style:none}.nav>li{position:relative;display:block}.nav>li>a{position:relative;display:block;padding:10px 15px}.nav-pills>li{float:left}.nav-pills>li>a{border-radius:4px}.nav-pills>li+li{margin-left:2px}.nav-pills>li.active>a{color:#fff;background-color:#428bca}.jumbotron{padding:30px;margin-bottom:30px;color:inherit;background-color:#eee}.jumbotron h1{color:inherit}.jumbotron p{margin-bottom:15px;font-size:21px;font-weight:200}.container .jumbotron{border-radius:6px}@media screen and (min-width:768px){.jumbotron{padding-top:48px;padding-bottom:48px}.container .jumbotron{padding-right:60px;padding-left:60px}.jumbotron h1{font-size:63px}}.container:after,.container:before,.nav:after,.nav:before,.row:after,.row:before{display:table;content:" "}.container:after,.nav:after,.row:after{clear:both}.pull-right{float:right!important}</style>
<link rel="stylesheet" href="styles/main.css" media="print" onload="this.media='all'">
<link rel="stylesheet" href="styles/bootstrap.css" media="print" onload="this.media='all'">
<!-- endbuild -->

</head>
Expand Down Expand Up @@ -64,5 +59,7 @@ <h4>Bootstrap</h4>
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X');ga('send','pageview');
</script>
<noscript><link rel="stylesheet" href="styles/main.css"></noscript>
<noscript><link rel="stylesheet" href="styles/bootstrap.css"></noscript>
</body>
</html>
Loading

0 comments on commit ef666df

Please sign in to comment.