Proper cssnano integration

Author: xsynaptic

gulpconfig.js

@@ -85,8 +85,12 @@ module.exports = {
     , dest: build
     }
   , compiler: 'libsass' // Choose a Sass compiler: 'libsass' or 'rubysass'
-  , autoprefixer: { browsers: ['> 3%', 'last 2 versions', 'ie 9', 'ios 6', 'android 4'] } // This tool is magic and you should use it in all your projects :)
-  , minify: { safe: true }
+  , cssnano: {
+      autoprefixer: {
+        add: true
+      , browsers: ['> 3%', 'last 2 versions', 'ie 9', 'ios 6', 'android 4'] // This tool is magic and you should use it in all your projects :)
+      }
+    }
   , rubySass: { // Requires the Ruby implementation of Sass; run `gem install sass` if you use this; Compass is *not* included by default
       loadPath: ['./src/scss', bower, modules] // Adds Bower and npm directories to the load path so you can @import directly
     , precision: 6

gulpfile.js/tasks/styles.js

@@ -4,29 +4,25 @@ var gulp          = require('gulp')
   , gutil         = require('gulp-util')
   , plugins       = require('gulp-load-plugins')({ camelize: true })
   , config        = require('../../gulpconfig').styles
-  , autoprefixer  = require('autoprefixer')
-  , processors    = [autoprefixer(config.autoprefixer)] // Add additional PostCSS plugins to this array as needed
 ;
 
-// Build stylesheets from source Sass files, autoprefix, and write source maps (for debugging) with rubySass
+// Build stylesheets from source Sass files, post-process, and write source maps (for debugging) with rubySass
 gulp.task('styles-rubysass', function() {
   return plugins.rubySass(config.build.src, config.rubySass)
   .on('error', gutil.log) // Log errors instead of killing the process
-  .pipe(plugins.postcss(processors))
-  .pipe(plugins.cssnano(config.minify))
-  .pipe(plugins.sourcemaps.write('./')) // No need to init; this is set in the configuration
-  .pipe(gulp.dest(config.build.dest)); // Drops the unminified CSS file into the `build` folder
+  .pipe(plugins.cssnano(config.cssnano)) // Post-process CSS (minify, autoprefix, etc.)
+  .pipe(plugins.sourcemaps.write('./')) // Write an external sourcemap; no need to initialize with rubysass as this is already done in the configuration
+  .pipe(gulp.dest(config.build.dest)); // Render the final CSS file(s) into the `build` folder
 });
 
-// Build stylesheets from source Sass files, autoprefix, and write source maps (for debugging) with libsass
+// Build stylesheets from source Sass files, post-process, and write source maps (for debugging) with libsass
 gulp.task('styles-libsass', function() {
   return gulp.src(config.build.src)
-  .pipe(plugins.sourcemaps.init())
+  .pipe(plugins.sourcemaps.init()) // Note that sourcemaps need to be initialized with libsass
   .pipe(plugins.sass(config.libsass))
-  .pipe(plugins.postcss(processors))
-  .pipe(plugins.cssnano(config.minify))
-  .pipe(plugins.sourcemaps.write('./')) // Writes an external sourcemap
-  .pipe(gulp.dest(config.build.dest)); // Drops the unminified CSS file into the `build` folder
+  .pipe(plugins.cssnano(config.cssnano))
+  .pipe(plugins.sourcemaps.write('./'))
+  .pipe(gulp.dest(config.build.dest));
 });
 
 // Easily configure the Sass compiler from `/gulpconfig.js`