Skip to content

Latest commit

 

History

History
executable file
·
132 lines (99 loc) · 3.22 KB

README.md

File metadata and controls

executable file
·
132 lines (99 loc) · 3.22 KB
Raw

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