Jekyll + Gulp.js + BrowserSync + PostCSS + Stylelint
- PostCSS with PreCSS, 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.
- User-guide
- Modularizing the default Jekyll theme, to make use of the new 7-1 pattern
- s3 preview task
- s3 publish task
- JSON-LD generator
Clone the repository on your computer and change into the projects folder. Run:
$ bundle
$ bower install
$ npm install
Open gulp/config.js
and change settings if needed.
Three tasks are available:
$ gulp
$ gulp publish
$ gulp deploy
- Running
gulp
will start a development server, build assets and the Jekyll site and start awatch
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.
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
- gulp-jekyll started out as a fork of Stefan Imhoff’s wonderful Gulp.js series.
- Michael Xander