Jekyll and Gulp workflow
I don't use this setup anymore, it might be outdated, proceed with caution.
As you probably know this blog is powered by Jekyll. It is a really nice platform, but it lacks a few things I'm used to during development. First one is live reload on file changes (and injecting CSS), using SASS, autoprefixer, ES6...
jekyll build, which is insanely slow. They would use BrowserSync to serve
So I did what programmers do - written my own. I quickly made usual gulp tasks:
styles- to compile SASS and autoprefix it
serve- to start local server, watch for changes and auto reload
First thing I did is that I was running
jekyll serve in one terminal, and
gulp serve with BrowserSync in the other. This was working decently, but I wanted to run only one command, and let the tasks do everything for me.
That is where node child process comes in.
; ; 'jekyll', ;
This task spawns a child process from gulp. Nice thing is that we can start it, and gulp will kill it on exit. Now we have up and running Jekyll server, and proxy it to BrowserSync.
But darn, injecting CSS files didn't really work. Server was expeting CSS file to come from
browserSync.stream in gulp pipe would inject it from the
_sass folder. I solved this by copying css file to the
.tmp/css and adding
.tmp to the
serveStatic option of the BrowserSync.
One thing I should mention, that I keep my SASS files in the
- Gulp watches changes on SASS/JS, and compiles them into
jekyll servetakes them and moves them to
_site. Jekyll also takes care of
- Gulp watches changes on
_siteand reloads the browser if html/js is changed.
Complete code is available here.
Add this to your
npm install then
gulp when it is finished and open
http://localhost:9000 in your browser. Then write your posts and enjoy much smoother workflow.