Merge pull request #47 from pipocadigital/proposal-inline-css

Task to load custom critical/first-view css as Internal
pipocadigital · May 7, 2018 · 7e8de24 · 7e8de24
2 parents d42796d + 695b6f7
commit 7e8de24
Show file tree

Hide file tree

Showing 9 changed files with 106 additions and 13 deletions.
diff --git a/gulpfile.js b/gulpfile.js
@@ -47,7 +47,9 @@ gulp.task('watch', () => {
 	const paths = Object.keys(developmentPaths);
 
 	paths.map(path => {
+		const task = path;
+
 		// Combine each development path with a task
-		return gulp.watch(gulp.paths[path], [path]);
+		return gulp.watch(gulp.paths[path], [task]);
 	});
 });
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,8 +18,9 @@
     "start": "npm install && bower install && npm run init",
     "wp": "gulp wp-install && gulp wp-pre-build && npm run wp:plugins",
     "wp:dev": "npm run wp && gulp",
-    "wp:build": "npm run wp && gulp build && npm run assets-version",
+    "wp:build": "npm run wp && gulp build && npm run assets-version && npm run inline-css",
     "wp:plugins": "cp -r ./plugins ./wordpress/wp-content",
+    "inline-css": "gulp inline-css",
     "assets-version": "gulp asssets-new-version"
   },
   "sasslintConfig": "sass-lint.yml",
@@ -46,6 +47,7 @@
     "gulp-main-bower-files": "^1.6.2",
     "gulp-plumber": "^1.2.0",
     "gulp-rename": "^1.2.2",
+    "gulp-replace": "^0.6.1",
     "gulp-sass": "^4.0.1",
     "gulp-sass-lint": "^1.3.4",
     "gulp-sourcemaps": "^2.6.4",

diff --git a/src/css/first-view.sass b/src/css/first-view.sass
@@ -0,0 +1,9 @@
+// tools
+@import "tools/mixins"
+
+// settings
+@import "settings/colors"
+@import "settings/measures"
+
+// components
+@import "components/header"
diff --git a/src/css/main.sass b/src/css/main.sass
@@ -14,7 +14,6 @@
 @import "elements/buttons"
 
 // components
-@import "components/header"
 @import "components/footer"
 @import "components/menu"
 

diff --git a/src/footer.php b/src/footer.php
@@ -0,0 +1,4 @@
+		<script src="<?php echo get_bloginfo('template_url') ?>/js/libs.min.js" defer></script>
+		<script src="<?php echo get_bloginfo('template_url') ?>/js/main.min.js" defer></script>
+	</body>
+</html>
diff --git a/src/header.php b/src/header.php
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Grão de Milho</title>
+
+		<meta charset="utf-8"/>
+		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+		<link inject-first-view-css href="<?php echo get_bloginfo('template_url') ?>/css/first-view.min.css" rel="stylesheet">
+
+		<link href="<?php echo get_bloginfo('template_url') ?>/css/libs.min.css" rel="stylesheet"/>
+		<link href="<?php echo get_bloginfo('template_url') ?>/css/main.min.css" rel="stylesheet"/>
+	</head>
+	<body>
diff --git a/src/index.php b/src/index.php
@@ -1,10 +1,7 @@
-<!DOCTYPE html>
-<html>
-<head>
-	<meta charset="UTF-8">
-	<title></title>
-</head>
-<body>
-	<strong>It works!</strong>
-</body>
-</html>
+<?php get_header() ?>
+
+<main>
+
+</main>
+
+<?php get_footer() ?>
diff --git a/tasks/inline-css.js b/tasks/inline-css.js
@@ -0,0 +1,22 @@
+const fs = require('fs');
+const gulp = require('gulp');
+const replace = require('gulp-replace');
+const browserSync = require('browser-sync');
+
+gulp.task('inline-css', function() {
+	const file = `${gulp.paths.stylesDest}/first-view.min.css`;
+
+	if (!fs.existsSync(file)) {
+		return false;
+	}
+
+	const inject = /<link\s*inject-first-view-css\s*(.*\>?)>/gi;
+	const comments = /\/\*[^*]*.*?\*\//;
+
+	const css = fs.readFileSync(file, 'utf8');
+	const style = css.replace(comments, '').trim();
+
+	return gulp.src([`${gulp.paths.pagesDest}**/*.php`])
+		.pipe(replace(inject, () => `<style>${style}</style>`))
+		.pipe(gulp.dest(gulp.paths.themesWp));
+});