Skip to content

michaelx/gulp-jekyll

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
app
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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

About

Build tooling for web development. Integrates Jekyll with Gulp.js, BrowserSync, PostCSS, Stylelint, and more.

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •