Merge pull request #58 from frend/feature/criticalcss

Feature/criticalcss
frend · May 1, 2016 · eae8f48 · eae8f48
2 parents 11a8d5e + 058cdc6
commit eae8f48
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 10 deletions.
diff --git a/_includes/_assets/initial.min.js b/_includes/_assets/initial.min.js
diff --git a/_includes/head.html b/_includes/head.html
@@ -2,12 +2,10 @@
 
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<meta charset="utf-8">
-
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<meta name="theme-color" content="#ea3b37">
 
 	<title>{% if page.title %}{{ site.title }} — {{ page.title }}{% else %}{{ site.title }}{% endif %}</title>
-
   	<meta name="description" content="{% if page.description %}{{ page.description | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
 
 	<!-- open graph - twitter card -->
@@ -24,13 +22,14 @@
 	<link href="//pls.webtype.com" rel="dns-prefetch" />
 	<link href="//www.google-analytics.com" rel="dns-prefetch" />
 
-	<link rel="stylesheet" href="/css/dist/global.min.css" id="loadCSSTarget">
+	<!-- favicon/touch-icon -->
 	<link rel="shortcut icon" href="/icon-touch.png">
 	<link rel="apple-touch-icon-precomposed" href="/icon-touch.png">
 
-	<link href="//cloud.webtype.com/css/d0f727b8-b89e-413f-ad8a-085ca4d7de47.css" rel="stylesheet" type="text/css" />
+	<!-- initial.min.js -->
+	<script id="loadCSSTarget">{% include _assets/initial.min.js %}</script>
 
-	<script>
-		!function(e){"use strict";var t=function(t,n,o){function d(e){return i.body?e():void setTimeout(function(){d(e)})}function r(){s.addEventListener&&s.removeEventListener("load",r),s.media=o||"all"}var a,i=e.document,s=i.createElement("link");if(n)a=n;else{var l=(i.body||i.getElementsByTagName("head")[0]).childNodes;a=l[l.length-1]}var f=i.styleSheets;s.rel="stylesheet",s.href=t,s.media="only x",d(function(){a.parentNode.insertBefore(s,n?a:a.nextSibling)});var u=function(e){for(var t=s.href,n=f.length;n--;)if(f[n].href===t)return e();setTimeout(function(){u(e)})};return s.addEventListener&&s.addEventListener("load",r),s.onloadcssdefined=u,u(r),s};"undefined"!=typeof exports?exports.loadCSS=t:e.loadCSS=t}("undefined"!=typeof global?global:this),function(e){var t=function(t,n){"use strict";var o=e.document.getElementsByTagName("script")[0],d=e.document.createElement("script");return d.src=t,d.async=!0,o.parentNode.insertBefore(d,o),n&&"function"==typeof n&&(d.onload=n),d};"undefined"!=typeof module?module.exports=t:e.loadJS=t}("undefined"!=typeof global?global:this),sessionStorage.FontsLoaded&&(document.documentElement.className+=" fonts-loaded");
-	</script>
+	<!-- global CSS -->
+	<link rel="stylesheet" href="/css/dist/global.min.css">
+	<link rel="stylesheet" href="//cloud.webtype.com/css/d0f727b8-b89e-413f-ad8a-085ca4d7de47.css">
 </head>
diff --git a/gulpfile.js b/gulpfile.js
@@ -18,7 +18,7 @@ var sass = require('gulp-sass');
 var scsslint = require('gulp-scss-lint');
 var sourcemaps = require('gulp-sourcemaps');
 //	JS
-// var concat = require('gulp-concat');
+var concat = require('gulp-concat');
 var eslint = require('gulp-eslint');
 var uglify = require('gulp-uglify');
 var webpack = require('gulp-webpack');
@@ -48,6 +48,15 @@ var src = {
 		dist: './css/dist/'
 	},
 	js: {
+		initial: {
+			project: [
+				'./node_modules/fg-loadcss/src/loadCSS.js',
+				'./node_modules/fg-loadjs/loadJS.js',
+				'./js/modules/webfont-detector.js',
+				'./js/modules/feature-detection.js'
+			],
+			output: 'initial'
+		},
 		global: {
 			master: './js/master.js',
 			project: [
@@ -67,7 +76,8 @@ var src = {
 			'./_components/**/*.js',
 			'!./_components/**/dist/*.js'
 		]
-	}
+	},
+	includes: './_includes/_assets/'
 };
 var options = {
 	sass: {
@@ -133,6 +143,15 @@ gulp.task('build:css', function () {
 		.pipe(rename(src.css.output + '.min.css'))
 		.pipe(gulp.dest(src.css.dist));
 });
+gulp.task('build:js:initial', function () {
+	return gulp.src(src.js.initial.project)
+		.pipe(concat(src.js.initial.output))
+		//	save minified output
+		.pipe(uglify())
+		.pipe(rename(src.js.initial.output + '.min.js'))
+		.pipe(gulp.dest(src.js.dist))
+		.pipe(gulp.dest(src.includes));
+});
 gulp.task('build:js:global', function () {
 	return gulp.src(src.js.global.master)
 		//	bundle modules
@@ -198,7 +217,7 @@ gulp.task('build', function (callback) {
 	runSequence(
 		['lint'],
 		['clean'],
-		['build:css', 'build:js:global'],
+		['build:css', 'build:js:initial', 'build:js:global'],
 		callback
 	);
 });

diff --git a/js/dist/initial.min.js b/js/dist/initial.min.js
diff --git a/js/modules/feature-detection.js b/js/modules/feature-detection.js
@@ -0,0 +1 @@
+document.documentElement.className = document.documentElement.className.replace('no-js', 'js');
diff --git a/js/modules/webfont-detector.js b/js/modules/webfont-detector.js
@@ -0,0 +1,3 @@
+if (sessionStorage.FontsLoaded) {
+	document.documentElement.className += ' fonts-loaded';
+}
diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
     "babel-preset-es2015": "^6.1.18",
     "babelify": "^7.2.0",
     "browserify": "^12.0.1",
+    "criticalcss": "^1.0.1",
     "eslint": "^1.10.3",
     "event-stream": "^3.3.2",
     "fontfaceobserver": "^1.6.2",
@@ -25,6 +26,7 @@
     "gulp-autoprefixer": "3.0.2",
     "gulp-babel": "^6.1.0",
     "gulp-clean": "^0.3.2",
+    "gulp-concat": "^2.6.0",
     "gulp-cssnano": "^2.1.0",
     "gulp-eslint": "^1.1.1",
     "gulp-merge-media-queries": "^0.2.1",
@@ -38,5 +40,9 @@
     "vinyl-buffer": "^1.0.0",
     "vinyl-source-stream": "^1.1.0",
     "webpack": "^1.12.2"
+  },
+  "dependencies": {
+    "fg-loadcss": "^1.2.0",
+    "fg-loadjs": "^0.2.3"
   }
 }