gulp-jekyll

Jekyll + Gulp.js + BrowserSync + PostCSS + Stylelint

Features

• PostCSS with postcss-advanced-variables, postcss-preset-env (includes Autoprefixer), postcss-nested, CSS MQPacker, and cssnano.
• UnCSS for production.
• Jekyll build and rebuild with BrowserSync live reload.
• Browserify or just gulp-concat, as you prefer.
• Optimization (and minification) of images, HTML, CSS, JavaScript, JSON, and XML files.
• Linting with JSHint and Stylelint.
• Extensive Stylelint config, based on my code-guide.
• Sourcemap generation.
• Responsive image creation, or image resizing, through either GraphicsMagick or ImageMagick.
• Image sprites.
• Gzip compression.
• Asset file revisions.
• WebP image generation.
• Deployment with rsync or s3_website.

What’s Coming Next

• User-guide
• Modularizing the default Jekyll theme, to make use of the new 7-1 pattern
• JSON-LD generator

Prerequisites

Note: Use asdf-vm to install and manage versions of Node.js and Ruby. Alternatives like NVM, nodenv, and rbenv can be used as long as there’s a .nvmrc, .ruby-version, etc. file.

Node.js. Currently developed against Node.js 8.11.4.

Ruby. Currently developed against ruby 2.5.3.

Bundler, install with:

gem install bundler

Installation

Clone the repository and change into the gulp-jekyll folder. Run:

bundle
npm install
npm run bower install

Setup

Open gulp/config.js and change settings if needed.

Usage

Create development build with live-reload:

npm start

Create production build with preview:

npm run build

Deploy latest production build through rsync:

npm run stage

Deploy latest production build on AWS:

npm run s3:push

Dry-run (preview) a deployment on AWS:

npm run s3:dry

CSS File Organization

gulp-jekyll uses a 5-1 pattern, which is abstracted from the 7-1 pattern. 5 folders, 1 file to compile them all in a single CSS file.

styles/
|
|- utilities/            # Configuration and helpers
|   |- _variables.css    # Global variables
|   |- _functions.css
|   |- _mixins.css
|   …
|
|- vendor/               # Third-party CSS
|   |- _normalize.css
|   …
|
|- base/                 # Boilerplate code
|   |- _reset.css
|   |- _base.css
|   |- _typography.css
|   …
|
|- layout/               # Global wireframe (macro)
|   |- _header.css
|   |- _navigation.css
|   |- _sidebar.css
|   |- _footer.css
|   …
|
|- components/           # Modules (micro)
|   |- _buttons.css
|   |- _cards.css
|   |- _tables.css
|   …
|
`- main.css              # Main file to import everything

Credits

• gulp-jekyll started out as a fork of Stefan Imhoff’s wonderful Gulp.js series.
• Michael Xander