Update to latest version of critical

addyosmani · Nov 26, 2014 · ea2a434 · ea2a434
1 parent 7cf9600
commit ea2a434
Show file tree

Hide file tree

Showing 7 changed files with 103 additions and 35 deletions.
diff --git a/dist/index-critical.html b/dist/index-critical.html
diff --git a/dist/index.html b/dist/index.html
@@ -8,12 +8,7 @@
         <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
 
         <!-- styles/main.css is where we initially write all your CSS and then overwrite it with your critical path CSS. Your site-wide styles are in styles/site.css, which we async load in via JavaScript lower down in the page  -->
-        <style type="text/css">
-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}@media print{*{color:#000!important;text-shadow:none!important;background:0 0!important;box-shadow:none!important}a{text-decoration:underline}a[href]:after{content:" (" attr(href)")"}a[href^="#"]:after{content:""}h3,p{orphans:3;widows:3}h3{page-break-after:avoid}}*,:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html{font-size:62.5%;-webkit-tap-highlight-color:transparent}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}@media (min-width:768px){.lead{font-size:21px}}.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){.container{width:750px}}@media (min-width:992px){.container{width:970px}}@media (min-width:1200px){.container{width:1170px}}.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){.col-lg-6{float:left;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;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;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,.nav>li>a{position:relative;display:block}.nav>li>a{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;background-color:#eee}.jumbotron,.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}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}}
-</style>
-<noscript>
-<link rel="stylesheet" href="styles/main.css">
-</noscript>
+        <link rel="stylesheet" href="styles/main.css">
 
     </head>
     <body>
@@ -32,7 +27,7 @@ <h3 class="text-muted">development</h3>
             </div>
 
             <div class="jumbotron">
-                <h1>&apos;Allo, &apos;Allo!</h1>
+                <h1>'Allo, 'Allo!</h1>
                 <p class="lead">Always a pleasure scaffolding your apps.</p>
                 <p><a class="btn btn-lg btn-success" href="#">Splendid!</a></p>
             </div>
@@ -48,7 +43,7 @@ <h4>Bootstrap</h4>
             </div>
 
             <div class="footer">
-                <p>&#x2665; from the Yeoman team</p>
+                <p>♥ from the Yeoman team</p>
             </div>
         </div>
 
@@ -74,8 +69,5 @@ <h4>Bootstrap</h4>
 
 
         <script src="scripts/main.js"></script>
-<script>
-(function(d,u){for (var i in u) {var l=d.createElement('link');l.type='text/css';l.rel='stylesheet';l.href=u[i]; d.getElementsByTagName('head')[0].appendChild(l);}}(document,['styles/main.css']));
-</script>
 </body>
 </html>
diff --git a/dist/styles/main.css b/dist/styles/main.css
diff --git a/dist/styles/site.css b/dist/styles/site.css
diff --git a/gulpfile.js b/gulpfile.js
@@ -120,15 +120,22 @@ gulp.task('critical', ['build', 'copystyles'], function () {
     // load them in later. We do this with
     // 'copystyles' above
 
-    critical.generateInline({
+    critical.generate({
         base: 'dist/',
         src: 'index.html',
-        styleTarget: 'styles/main.css',
-        htmlTarget: 'index.html',
+        dest: 'styles/site.css',
         width: 320,
         height: 480,
         minify: true
+    }, function(err, output){
+        critical.inline({
+            base: 'dist/',
+            src: 'index.html',
+            dest: 'index-critical.html',
+            minify: true
+        });        
     });
+
 });
 
 

diff --git a/output/critical/styles/site.css b/output/critical/styles/site.css
diff --git a/package.json b/package.json
@@ -4,29 +4,29 @@
   "dependencies": {},
   "devDependencies": {
     "connect": "^3.0.2",
-    "connect-livereload": "^0.4.0",
-    "critical": "^0.2.0",
+    "connect-livereload": "^0.5.2",
+    "critical": "^0.4.0",
     "gulp": "^3.6.0",
-    "gulp-autoprefixer": "0.0.10",
-    "main-bower-files": "1.0.1",
-    "gulp-cache": "^0.2.1",
+    "gulp-autoprefixer": "^2.0.0",
+    "gulp-cache": "^0.2.4",
     "gulp-clean": "^0.3.1",
     "gulp-csso": "^0.2.9",
     "gulp-filter": "^1.0.0",
-    "gulp-flatten": "^0.0.2",
-    "gulp-imagemin": "^1.0.1",
+    "gulp-flatten": "0.0.4",
+    "gulp-imagemin": "^2.0.0",
     "gulp-jshint": "^1.5.3",
     "gulp-livereload": "^2.1.0",
-    "gulp-load-plugins": "^0.6.0",
+    "gulp-load-plugins": "^0.7.1",
     "gulp-rename": "^1.2.0",
     "gulp-size": "^1.0.0",
     "gulp-uglify": "^1.0.0",
     "gulp-useref": "^1.0.1",
-    "jshint-stylish": "^0.4.0",
+    "jshint-stylish": "^1.0.0",
+    "main-bower-files": "^2.4.0",
     "opn": "^1.0.0",
     "serve-index": "^1.1.4",
     "serve-static": "^1.4.0",
-    "wiredep": "^1.4.3"
+    "wiredep": "^2.2.0"
   },
   "engines": {
     "node": ">=0.10.0"