gulp-jekyll

gulp-jekyll

Download

gulp-jekyll

Starter for jekyll using gulp Jekyll + Gulp.js + BrowserSync + Scss + Stylelint Base on michaelx/gulp-jekyll repository

Features

  • Scss, Autoprefixer, CSS MQPacker, cssnano, and of course sourcemaps for development.
  • UnCSS for production.
  • Jekyll build and rebuild with BrowserSync.
  • 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.
  • 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.

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

minimalacademicresumeportfoliodocumentationwikitailwindbootstrapdarkecommercegithub-pagesblog