# Jekyll and Gulp workflow

DevFeed: [Jekyll and Gulp workflow](<https://devfeed.tech/articles/jekyll-and-gulp-workflow-37301.md>)

Original publisher: [Read original article](<https://muffinman.io/blog/jekyll-gulp-workflow/>)

Author: Stanko

Published: 2016-02-27T00:00:00Z

Content type: tutorial

Language: en

Sources: [Stanko Tadić](<https://devfeed.tech/sources/stanko-tadic.md>)

Topics: [Gulp](<https://devfeed.tech/topics/gulp.md>), [Jekyll](<https://devfeed.tech/topics/jekyll.md>), [Sass](<https://devfeed.tech/topics/sass.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [Development](<https://devfeed.tech/topics/development.md>), [es6](<https://devfeed.tech/topics/es6.md>)

Tags: [development](<https://devfeed.tech/tags/development.md>), [es6](<https://devfeed.tech/tags/es6.md>), [gulp](<https://devfeed.tech/tags/gulp.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [jekyll](<https://devfeed.tech/tags/jekyll.md>), [sass](<https://devfeed.tech/tags/sass.md>), [workflow](<https://devfeed.tech/tags/workflow.md>)

## AI overview

This tutorial describes a Jekyll development workflow that uses Gulp to compile and watch SASS and JavaScript, run a local Jekyll server, proxy it through BrowserSync, and reload the browser on changes. The author notes that the setup may be outdated because they no longer use Jekyll.

## Source excerpt

Please note that I'm not using Jekyll anymore, so this post might be outdated. Update, November 2017 # I don't use this setup anymore, it might be outdated, proceed with caution. Original post # 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... I tried to find a boilerplate, but everything I found didn't match my needs. Usually people would run gulp tasks for SASS and JavaScript files, and on change run jekyll build, which is insanely slow. They would use BrowserSync to serve _site folder. So I did what programmers do - written my own. I quickly made usual gulp tasks: styles - to compile SASS and autoprefix it scripts - to transpile ES6 goodness, and concatenate JavaScript files 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. import childProcess from 'child_process'; const spawn = childProcess.spawn; gulp.task('jekyll', function (){ const jekyll = spawn('jekyll', ['serve'], { stdio: 'inherit' }); }); 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 /css/style.css, but 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 _sass folder, and JavaScript in the _js one. Gulp watches changes on SASS/JS, and