Jekyll + Gulp.js + BrowserSync + PostCSS + Stylelint
JavaScript CSS HTML Ruby
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

README.md

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

Node.js (and npm, included), use NVM to install and manage versions. Currently tested with Node.js v6.10.1 (LTS).

Ruby, use rbenv to install and manage versions. Currently tested with ruby 2.3.1p112.

Bundler, install with:

gem install bundler

bower, install with:

npm install -g bower

Installation

Clone the repository on your computer and change into the projects folder. Run:

$ bundle
$ bower install
$ npm install

Setup

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

Running Gulp.js

Three tasks are available:

$ gulp
$ gulp publish
$ gulp deploy
  • Running gulp will start a development server, build assets and the Jekyll site and start a watch task.
  • Running gulp publish will copy and optimize assets and run a production build of Jekyll.
  • Running gulp deploy will copy the generated files with Rsync to your server.

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