0.2.2:

- Switched from PreCSS (outdated) to the more recent core plugins - Added prerequisites to readme
michaelx · Jun 26, 2018 · 55a5a23 · 55a5a23
1 parent 9060038
commit 55a5a23
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 36 deletions.
diff --git a/README.md b/README.md
@@ -4,13 +4,14 @@ Jekyll + Gulp.js + BrowserSync + PostCSS + Stylelint
 
 ## Features
 
-- PostCSS with PreCSS, Autoprefixer, CSS MQPacker, cssnano, and of course sourcemaps for development.
+- PostCSS with [postcss-advanced-variables](https://github.com/jonathantneal/postcss-advanced-variables), [postcss-preset-env](https://github.com/csstools/postcss-preset-env) (includes Autoprefixer), [postcss-nested](https://github.com/postcss/postcss-nested), [CSS MQPacker](https://github.com/hail2u/node-css-mqpacker), and [cssnano](https://github.com/cssnano/cssnano).
 - UnCSS for production.
-- Jekyll build and rebuild with BrowserSync.
+- 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](https://github.com/michaelx/code-guide).
+- Sourcemap generation.
 - Responsive image creation, or image resizing, through either GraphicsMagick or ImageMagick.
 - Image sprites.
 - Gzip compression.
@@ -22,10 +23,26 @@ Jekyll + Gulp.js + BrowserSync + PostCSS + Stylelint
 
 - 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
 
+## Prerequisites
+
+Node.js (and npm, included), use [NVM](https://github.com/creationix/nvm) to install and manage versions. Currently tested with Node.js `v6.10.1` (LTS).
+
+Ruby, use [rbenv](https://github.com/rbenv/rbenv) to install and manage versions. Currently tested with ruby `2.3.1p112`.
+
+[Bundler](https://github.com/bundler/bundler), install with:
+
+```sh
+gem install bundler
+```
+
+[bower](https://github.com/bower/bower), install with:
+
+```sh
+npm install -g bower
+```
+
 ## Installation
 
 Clone the repository on your computer and change into the projects folder. Run:

diff --git a/gulp/config.js b/gulp/config.js
@@ -91,11 +91,15 @@ module.exports = {
     src:  srcAssets + '/styles/*.css',
     dest: developmentAssets + '/css',
     options: {
-      precss: {},
-      autoprefixer: {
-        cascade: true
+      advancedVariables: {},
+      presetEnv: {
+        autoprefixer: {
+          cascade: true
+        }
       },
-      mqpacker: { sort: true }
+      nested: {},
+      mqpacker: { sort: true },
+      cssnano: {}
     }
   },
 

diff --git a/gulp/tasks/development/styles.js b/gulp/tasks/development/styles.js
@@ -1,14 +1,15 @@
-var config       = require('../../config').styles;
+var config            = require('../../config').styles;
 
-var gulp         = require('gulp');
-var postcss      = require('gulp-postcss');
-var precss       = require('precss');
-var autoprefixer = require('autoprefixer');
-var mqpacker     = require('css-mqpacker');
-var cssnano      = require('cssnano');
-var plumber      = require('gulp-plumber');
-var sourcemaps   = require('gulp-sourcemaps');
-var browsersync  = require('browser-sync');
+var gulp              = require('gulp');
+var postcss           = require('gulp-postcss');
+var advancedVariables = require('postcss-advanced-variables');
+var presetEnv         = require('postcss-preset-env');
+var nested            = require('postcss-nested');
+var mqpacker          = require('css-mqpacker');
+var cssnano           = require('cssnano');
+var plumber           = require('gulp-plumber');
+var sourcemaps        = require('gulp-sourcemaps');
+var browsersync       = require('browser-sync');
 
 function onError (err) {
   console.log(err);
@@ -23,10 +24,11 @@ gulp.task('styles', function() {
 
   // PostCSS plugins
   var processors = [
-    precss(config.options.precss),
-    autoprefixer(config.options.autoprefixer),
+    advancedVariables(config.options.advancedVariables),
+    presetEnv(config.options.presetEnv),
+    nested(config.options.nested),
     mqpacker(config.options.mqpacker),
-    cssnano()
+    cssnano(config.options.cssnano)
   ];
 
   return gulp.src(config.src)

diff --git a/gulp/tasks/production/styles.js b/gulp/tasks/production/styles.js
@@ -1,13 +1,14 @@
-var config       = require('../../config').styles;
+var config            = require('../../config').styles;
 
-var gulp         = require('gulp');
-var postcss      = require('gulp-postcss');
-var precss       = require('precss');
-var autoprefixer = require('autoprefixer');
-var mqpacker     = require('css-mqpacker');
-var cssnano      = require('cssnano');
-var plumber      = require('gulp-plumber');
-var browsersync  = require('browser-sync');
+var gulp              = require('gulp');
+var postcss           = require('gulp-postcss');
+var advancedVariables = require('postcss-advanced-variables');
+var presetEnv         = require('postcss-preset-env');
+var nested            = require('postcss-nested');
+var mqpacker          = require('css-mqpacker');
+var cssnano           = require('cssnano');
+var plumber           = require('gulp-plumber');
+var browsersync       = require('browser-sync');
 
 function onError (err) {
   console.log(err);
@@ -25,10 +26,11 @@ gulp.task('styles:production', function() {
 
   // PostCSS plugins
   var processors = [
-    precss(config.options.precss),
-    autoprefixer(config.options.autoprefixer),
+    advancedVariables(config.options.advancedVariables),
+    presetEnv(config.options.presetEnv),
+    nested(config.options.nested),
     mqpacker(config.options.mqpacker),
-    cssnano()
+    cssnano(config.options.cssnano)
   ];
 
   return gulp.src(config.src)

diff --git a/package.json b/package.json
@@ -1,11 +1,10 @@
 {
   "name": "gulp-jekyll",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "The build process for gulp-jekyll",
   "author": "Michael Xander",
   "repository": "michaelx/gulp-jekyll",
   "devDependencies": {
-    "autoprefixer": "^8.6.3",
     "browser-sync": "^2.24.4",
     "browserify": "^16.2.2",
     "browserify-shim": "^3.8.14",
@@ -38,9 +37,11 @@
     "gulp.spritesmith": "^6.9.0",
     "jshint": "^2.9.5",
     "jshint-stylish": "^2.2.1",
+    "postcss-advanced-variables": "^2.3.3",
+    "postcss-nested": "^3.0.0",
+    "postcss-preset-env": "^5.2.0",
     "postcss-reporter": "^5.0.0",
     "postcss-uncss": "^0.14.0",
-    "precss": "^3.1.2",
     "pretty-hrtime": "^1.0.3",
     "require-dir": "^1.0.0",
     "run-sequence": "^2.2.1",