Jekyll, critical CSS, HTML minify in one gulp task? - html

Question

I have a website based on Jekyll and I want to make it as fast as possible. My goal is to have a gulp task that builds the Jekyll site, generates the critical CSS and minifies the HTML.
Part of my gulpfile looks something like this:
gulp.task("jekyll", function (gulpCallBack){
var spawn = require("child_process").spawn;
var jekyll = spawn('jekyll', ["build"], {stdio: "inherit"});
jekyll.on("exit", function(code) {
gulpCallBack(code === 0 ? null : "ERROR: Jekyll process exited with code: "+code);
});
});
gulp.task("html", function() {
gulp.src("./_site/index.html")
.pipe(htmlmin({collapseWhitespace: true}))
.pipe(gulp.dest("./_site"))
gulp.src("./_site/*/*.html")
.pipe(htmlmin({collapseWhitespace: true}))
.pipe(gulp.dest("./_site/./"))
});
gulp.task("critical", function() {
critical.generate({
base: '_site/',
src: 'index.html',
dest: 'css/critical.css',
minify: true,
extract: true,
width: 320,
height: 480
});
critical.inline({
base: '_site/',
src: 'index.html',
dest: 'index.html',
minify: true
});
})
If I run the tasks separately, gulp jekyll, then gulp html and finally gulp critical everything works fine and as I want to. Since I am lazy I do not want to run three tasks manually each time. My idea was to run them synchronously/one after the other by using the following code.
gulp.task("jekyll", function (gulpCallBack){};
gulp.task("html", ["jekyll"], function() {};
gulp.task("critical", ["html"], function() {};
I thought, I just could run gulp critical which waits for the html task to finish which waits for the jekyll task to finish. The site got build and minified but the critical CSS is not injected. The task run in the correct order.
➜ jonas.re git:(master) ✗ gulp critical
[19:21:18] Using gulpfile ~/dev/jonas.re/gulpfile.js
[19:21:18] Starting 'jekyll'...
Configuration file: /Users/j.reitmann/dev/jonas.re/_config.yml
Source: /Users/j.reitmann/dev/jonas.re
Destination: /Users/j.reitmann/dev/jonas.re/_site
Generating...
done.
Auto-regeneration: disabled. Use --watch to enable.
[19:21:18] Finished 'jekyll' after 528 ms
[19:21:18] Starting 'html'...
[19:21:18] Finished 'html' after 5.37 ms
[19:21:18] Starting 'critical'...
[19:21:18] Finished 'critical' after 1.63 ms
Again, by running them manually after each other, it works perfectly.
I heard of runSequence but I have to return a stream which I have no idea of to do that for the jekyll task (if that is even possible?). And maybe the error something different since this works:
➜ jonas.re git:(master) ✗ gulp jekyll
[19:27:49] Using gulpfile ~/dev/jonas.re/gulpfile.js
[19:27:49] Starting 'jekyll'...
Configuration file: /Users/j.reitmann/dev/jonas.re/_config.yml
Source: /Users/j.reitmann/dev/jonas.re
Destination: /Users/j.reitmann/dev/jonas.re/_site
Generating...
done.
Auto-regeneration: disabled. Use --watch to enable.
[19:27:50] Finished 'jekyll' after 549 ms
➜ jonas.re git:(master) ✗ gulp html
[19:27:54] Using gulpfile ~/dev/jonas.re/gulpfile.js
[19:27:54] Starting 'html'...
[19:27:54] Finished 'html' after 5.56 ms
➜ jonas.re git:(master) ✗ gulp critical
[19:27:57] Using gulpfile ~/dev/jonas.re/gulpfile.js
[19:27:57] Starting 'critical'...
[19:27:57] Finished 'critical' after 1.66 ms
I would be very thankful for any help. You can have a look for my whole gulpfile here.

Answer 1

The problem come from critical. I get it working like this :
_config.yml
As we need style.scss to be parsed in order to generate a css for crititical.
Remove /css/style.scss from the exclude array.
style.scss
./_sass path is useless a it is the default path for Jekyll sass processor.
In order to be processed, this file needs an empty front matter.
---
---
#import "_assets/fonts.scss";
#import "_assets/mixins.scss";
#import "_assets/reset.scss";
#import "_assets/colors.scss";
#import "_assets/syntax-highlighter.scss";
#import "_modules/header.scss";
#import "_modules/content.scss";
_includes/head.hmtl
Critical needs a link to original style sheet.
Remove the css loading script and replace it with
<link rel="stylesheet" href="{{ "/css/style.css" | prepend: site.baseurl }}">
The loading script will be inserted by critical.
gulpfile.js
You can now chain yours tasks. Note that I've changed the critical method to generateInline.
gulp.task("jekyll", function (gulpCallBack){
...
gulp.task("html", ["jekyll"], function() {
...
gulp.task("critical", ["html"], function() {
critical.generateInline({
base: '_site/',
src: 'index.html',
dest: 'css/critical.css',
htmlTarget: 'index.html',
minify: true,
extract: true,
width: 320,
height: 480
});
})
Bim !

Answer 2

It seems that there is not really a way to run gulp tasks synchronous. But your shell is able to run commands synchronous with the && operator.
I now use a gulp module called gulp-shell. Here is how my code looks:
gulp.task('build', shell.task([
'gulp jekyll && gulp critical && gulp html'
]));
So I am able to just run gulp build to run the gulp tasks jekyll, critical and html in order. Though this works, I am not really happy with this solution. If anybody knows a better solution, please let me know.

Answer 3

I typically use the _includes folder within Jekyll to do the inlining for me. All you have to do is gulp.dest('_includes') — you can call gulp.dest() multiple times in a row.
Sample task in gulpfile
Then add a line to your main page template in Jekyll:
<style type="text/css">{% include main.min.css %}</style>
See the Jekyll source code in context