PostCSS basic setup and test with Gulp

cat-colors.json

{
	"colorList": {
		"c1"  : ["#000000", "#000011"],
		"c2"  : ["#000011", "#000022"],
		"c3"  : ["#000022", "#000033"],
		"c4"  : ["#000033", "#000044"],
		"c7"  : ["#000044", "#000055"],
		"c8"  : ["#000055", "#000066"],
		"c9"  : ["#000066", "#000077"],
		"c10" : ["#000077", "#000088"]
	}
}

gulpfile.js

var gulp = require('gulp'),
	jshint = require('gulp-jshint'),
	uglify = require('gulp-uglify'),
	imagemin = require('gulp-imagemin'),
	rename = require('gulp-rename'),
	concat = require('gulp-concat'),
	notify = require('gulp-notify'),
	cache = require('gulp-cache'),
	browserSync = require('browser-sync'),
	reload      = browserSync.reload;

var gutil = require('gulp-util');
var postcss = require('gulp-postcss');
var simplevars = require('postcss-simple-vars');
var autoprefixer = require('autoprefixer-core');
var mqpacker = require('css-mqpacker');
var csswring = require('csswring');
var nestedcss = require('postcss-nested');
var corepostcss = require('postcss');
var categories = require('./data/cat-colors.json');

var dataloop = function(css) {
	gutil.log('category[0] ');

	for ( var category in categories.colorList ) {
		var colorSet = categories.colorList[category];
		var borderTop = colorSet[0];
		var borderBottom = colorSet[1];
		var rule = corepostcss.rule({ selector: '.cat-' + category });
		rule.append({ prop: 'border-top', value: '1px solid ' + borderTop});
		rule.append({ prop: 'border-bottom', value: '1px solid ' + borderBottom + ";"});
		css.append(rule);
	}
};

gulp.task('css', function () {
	var processors = [
		autoprefixer({browsers: ['last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4']}),
		simplevars,
		nestedcss,
		dataloop
	];
	return gulp.src('./preCSS/*.css')
		.pipe(postcss(processors))
		// .pipe(postcss(processors).on('error', gutil.log))
		.pipe(gulp.dest('./dest'));
});

// Static server
gulp.task('browser-sync', function() {
	 browserSync({
		  server: {
				baseDir: "./"
		  }
	 });
});

// Concatenate & Minify JS
gulp.task('scripts', function() {
	return gulp.src('js/*.js')
		.pipe(concat('all.js'))
		.pipe(gulp.dest('dist'))
		.pipe(rename('all.min.js'))
		.pipe(uglify())
		.pipe(gulp.dest('dist'))
		.pipe(reload({stream:true}));
});

// Images
gulp.task('images', function() {
  return gulp.src('img/**/*')
	.pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
	.pipe(gulp.dest('dist/images'))
	.pipe(notify({ message: 'Images task complete' }));
});

// Watch
gulp.task('watch', function() {

	// Watch .scss files
	gulp.watch('preCSS/**/*.css', ['css', browserSync.reload]);

	// Watch .js files
	gulp.watch(['js/**/*.js','main.js'], ['scripts', browserSync.reload]);

	// Watch image files
	gulp.watch('img/**/*', ['images']);

	// Watch any files in dist/, reload on change
	gulp.watch("*.html", browserSync.reload);

});

gulp.task('default', ['css', 'browser-sync', 'scripts', 'watch']);

package.json

{
  "name": "Quick-setup",
  "description": "Basic Gulp niceties for rapidly building stuff",
  "version": "0.0.2",
  "author": "Ben Frain",
  "private": true,
  "devDependencies": {
    "autoprefixer-core": "^5.1.5",
    "browser-sync": "^2.0.0-rc4",
    "css-mqpacker": "^3.0.1",
    "csswring": "^3.0.1",
    "gulp": "^3.8.10",
    "gulp-autoprefixer": "~2.1.0",
    "gulp-cache": "~0.2.4",
    "gulp-concat": "~2.4.2",
    "gulp-imagemin": "~2.0.0",
    "gulp-jshint": "~1.9.0",
    "gulp-notify": "~2.0.1",
    "gulp-postcss": "^4.0.3",
    "gulp-rename": "~1.2.0",
    "gulp-uglify": "~1.0.1",
    "gulp-util": "^3.0.3",
    "postcss": "^4.0.4",
    "postcss-nested": "^0.2.1",
    "postcss-simple-vars": "^0.2.3"
  }
}