Added PostCSS and updated gulp task and dependencies

LIN3S · Mar 1, 2016 · 7b05668 · 7b05668
1 parent abaf13c
commit 7b05668
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 19 deletions.
diff --git a/src/themes/WordpressStandard/Resources/assets/scss/app.scss b/src/themes/WordpressStandard/Resources/assets/scss/app.scss
@@ -14,13 +14,13 @@
 @import 'base/wp';
 
 // Imports if the project uses Zurb Foundation
-  @import '../../../node_modules/foundation-sites/scss/util/util';
-  @import '../../../node_modules/foundation-sites/scss/global';
-  @import '../../../node_modules/foundation-sites/scss/grid/grid';
-  @include foundation-global-styles;
-  @include foundation-flex-grid;
+@import '../../../node_modules/foundation-sites/scss/util/util';
+@import '../../../node_modules/foundation-sites/scss/global';
+@import '../../../node_modules/foundation-sites/scss/grid/grid';
+@include foundation-global-styles;
+@include foundation-flex-grid;
 // Import if the project uses LIN3S's custom grid
-  @import 'base/grid';
+@import 'base/grid';
 
 @import 'base/common';
 

diff --git a/src/themes/WordpressStandard/gulpfile.js b/src/themes/WordpressStandard/gulpfile.js
@@ -13,12 +13,14 @@
 'use strict';
 
 var gulp = require('gulp'),
-  autoprefixer = require('gulp-autoprefixer'),
   concat = require('gulp-concat'),
-  cssNano = require('gulp-cssnano'),
+  cssnext = require('postcss-cssnext'),
+  cssnano = require('gulp-cssnano'),
   file = require('gulp-file'),
   livereload = require('gulp-livereload'),
   modernizr = require('gulp-modernizr'),
+  plumber = require('gulp-plumber'),
+  postcss = require('gulp-postcss'),
   rename = require('gulp-rename'),
   sass = require('gulp-sass'),
   scsslint = require('gulp-scss-lint'),
@@ -41,34 +43,53 @@ var watch = {
   svg: './Resources/assets/svg/**/*.svg'
 };
 
+// Plumber error function
+function onError(err) {
+  console.log(err);
+  this.emit('end');
+}
+
 gulp.task('wp-style', function () {
   var content = '/*\n * Author: LIN3S\n * Author URI: http://www.lin3s.com/\n */';
 
   return file('style.css', content, {src: true}).pipe(gulp.dest('.'));
 });
 
 gulp.task('scss-lint', function () {
-  return gulp.src([watch.sass, '!' + paths.sass + '/base/_reset.scss', '!' + paths.sass + '/base/_grid.scss'])
+  return gulp.src([
+      watch.sass,
+      '!' + paths.sass + '/base/_reset.scss',
+      '!' + paths.sass + '/base/_grid.scss'
+    ])
+    .pipe(plumber({
+      errorHandler: onError
+    }))
     .pipe(scsslint({
       'config': './.scss_lint.yml'
     }));
 });
 
 gulp.task('sass', ['wp-style', 'scss-lint'], function () {
   return gulp.src(paths.sass + '/app.scss')
+    .pipe(plumber({
+      errorHandler: onError
+    }))
     .pipe(sass({
       errLogToConsole: true
     }))
-    .pipe(autoprefixer())
+    .pipe(postcss([cssnext]))
     .pipe(gulp.dest(paths.css))
     .pipe(livereload());
 });
 
 gulp.task('sass:prod', function () {
   return gulp.src(paths.sass + '/app.scss')
+    .pipe(plumber({
+      errorHandler: onError
+    }))
     .pipe(sass())
-    .pipe(autoprefixer())
-    .pipe(cssNano({
+    .pipe(postcss([cssnext]))
+    .pipe(cssnano({
       keepSpecialComments: 1,
       rebase: false
     }))
@@ -80,6 +101,9 @@ gulp.task('sass:prod', function () {
 
 gulp.task('sprites', function () {
   return gulp.src(paths.svg + '/*.svg')
+    .pipe(plumber({
+      errorHandler: onError
+    }))
     .pipe(svgSprite({
       mode: {
         symbol: {
@@ -97,6 +121,9 @@ gulp.task('vendor-css', function () {
       // Put here css files of vendors, for example:
       // paths.npm + '/slick-carousel/slick/slick.css'
     ])
+    .pipe(plumber({
+      errorHandler: onError
+    }))
     .pipe(concat('vendor.css'))
     .pipe(gulp.dest(paths.css));
 });
@@ -107,12 +134,18 @@ gulp.task('vendor-js', function () {
       paths.npm + '/fastclick/lib/fastclick.js',
       paths.npm + '/svg4everybody/dist/svg4everybody.min.js'
     ])
+    .pipe(plumber({
+      errorHandler: onError
+    }))
     .pipe(concat('vendor.js'))
     .pipe(gulp.dest(paths.buildJs));
 });
 
 gulp.task('modernizr', function () {
   return gulp.src([paths.js + '/*.js'])
+    .pipe(plumber({
+      errorHandler: onError
+    }))
     .pipe(modernizr({
       'options': [
         'setClasses', 'addTest', 'html5printshiv', 'testProp', 'fnBind'
@@ -124,6 +157,9 @@ gulp.task('modernizr', function () {
 
 gulp.task('js:prod', function () {
   return gulp.src([paths.js + '/*.js'])
+    .pipe(plumber({
+      errorHandler: onError
+    }))
     .pipe(concat('app.min.js'))
     .pipe(uglify())
     .pipe(gulp.dest(paths.buildJs));

diff --git a/src/themes/WordpressStandard/package.json b/src/themes/WordpressStandard/package.json
@@ -4,22 +4,24 @@
   "author": "LIN3S",
   "dependencies": {
     "fastclick": "^1.0.6",
-    "foundation-sites": "~6.1",
-    "jquery": "^2.1.4",
+    "foundation-sites": "~6.2",
+    "jquery": "^2.2.1",
     "svg4everybody": "^2.0.0"
   },
   "devDependencies": {
     "gulp": "^3.9.0",
-    "gulp-autoprefixer": "^3.1.0",
     "gulp-concat": "^2.6.0",
     "gulp-cssnano": "^2.1.0",
     "gulp-file": "^0.2.0",
     "gulp-livereload": "^3.8.1",
+    "gulp-plumber": "^1.1.0",
     "gulp-modernizr": "0.0.0",
+    "gulp-postcss": "^6.1.0",
     "gulp-rename": "^1.2.2",
-    "gulp-sass": "^2.1.0",
-    "gulp-scss-lint": "^0.3.8",
-    "gulp-svg-sprite": "^1.2.14",
-    "gulp-uglify": "^1.5.1"
+    "gulp-sass": "^2.2.0",
+    "gulp-scss-lint": "^0.3.9",
+    "gulp-svg-sprite": "^1.2.19",
+    "gulp-uglify": "^1.5.1",
+    "postcss-cssnext": "^2.4.0"
   }
 }