gulpfile.js

var gulp = require('gulp');
var plugins = require('gulp-load-plugins');
var browserSync = require('browser-sync');
var prettyBytes = require('pretty-bytes');

var reload = browserSync.reload;
var $ = plugins();

gulp.task('concat:styles', function() {
	var paths = {
	    src: [
	        'assets/src/styles/**/*.css',
	        '!assets/src/styles/**/*.bkp',
	        '!assets/src/styles/{partials,partials/**}'
	    ],
	    dest: 'assets/styles'
	};

    var props = require(process.cwd()+'/assets/src/styles/properties.json');
    var processors = [
        require('postcss-import')(),
        require('postcss-url')({'url': 'rebase'}),
        require('postcss-custom-properties')({'variables': props.properties}),
        require('postcss-custom-media')({'extensions': props.media}),
        require('postcss-media-minmax')(),
        require('postcss-calc')({'precision': 3}),
        require('postcss-color-rgb')(),
        require('autoprefixer')(),
        require('postcss-reporter')({clearReportedMessages: true})
    ];

    return gulp.src(paths.src)
        .pipe($.sourcemaps.init({loadMaps: true}))
        .pipe($.postcss(processors))
        .pipe($.sourcemaps.write('.'))
        .pipe(gulp.dest(paths.dest));
});

gulp.task('compress:styles', function() {
	var paths = {
	    src: [
	        'assets/styles/**/*.css',
	        '!assets/styles/**/debug.css',
	    ],
	    dest: 'assets/styles'
	};
	var CSSNANO = {
	    autoprefixer: false,
	    calc: false,
	    colormin: true,
	    convertValues: false,
	    discardComments: true,
	    discardDuplicates: false,
	    discardEmpty: true,
	    discardUnused: false,
	    filterPlugins: false,
	    mergeIdents: false,
	    mergeLonghand: false,
	    mergeRules: false,
	    minifyFontValues: true,
	    minifyGradients: false,
	    minifySelectors: true,
	    normalizeCharset: false,
	    normalizeUrl: false,
	    orderedValues: false,
	    reduceIdents: false,
	    reduceTransforms: false,
	    svgo: true,
	    uniqueSelectors: false,
	    zindex: false
	};
    var processors = [
        require('cssnano')(CSSNANO),
        require('postcss-reporter')({clearReportedMessages: true})
    ];

    return gulp.src(paths.src)
        .pipe($.bytediff.start())
        .pipe($.postcss(processors))
        .pipe($.rename({suffix: '.min'}))
        .pipe($.bytediff.stop(function(data) {
            const savedMsg = 'saved ' + (prettyBytes(data.savings) - (data.percent * 100).toFixed(1).replace(/\.0$/, '')) + '%';
            const msg = data.savings > 0 ? savedMsg : 'already optimized';

            return 'cssnano: ' + $.util.colors['green']('✔') + ' ' + data.fileName ' ' + $.util.colors['grey']('(' + msg ')');
        }))
        .pipe(gulp.dest(paths.dest));
});

// create task that ensures the called task is complete before
// reloading browsers
gulp.task('watch:styles', ['contact:styles', 'compress:styles'], reload);

// Static Server + watching css files
gulp.task('serve', function() {
    browserSync.init({
        proxy: 'myproject.test'
    });

    // add browserSync.reload to the tasks array to make
    // all browsers reload after tasks are complete.
    gulp.watch(['assets/src/styles/**/*.css'], ['watch:styles']);
});

package.json

{
  "private": true,
  "scripts": {},
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not IE 10",
    "iOS >= 7",
    "Safari >= 8"
  ],
  "devDependencies": {
    "autoprefixer": "^7.1.2",
    "browser-sync": "^2.18.13",
    "cssnano": "^3.10.0",
    "del": "^3.0.0",
    "gulp": "^3.9.1",
    "gulp-buffer": "0.0.2",
    "gulp-bytediff": "^1.0.0",
    "gulp-changed": "^3.1.0",
    "gulp-concat": "^2.6.1",
    "gulp-csscomb": "^3.0.8",
    "gulp-if": "^2.0.2",
    "gulp-imagemin": "^3.3.0",
    "gulp-load-plugins": "^1.5.0",
    "gulp-postcss": "^7.0.0",
    "gulp-rename": "^1.2.2",
    "gulp-require-tasks": "^1.2.1",
    "gulp-sourcemaps": "^2.6.0",
    "gulp-svgstore": "^6.1.0",
    "gulp-tap": "^1.0.1",
    "gulp-uglify": "^3.0.0",
    "gulp-util": "^3.0.8",
    "merge-stream": "^1.0.1",
    "minimist": "^1.2.0",
    "npm-check-updates": "^2.12.1",
    "postcss-calc": "^6.0.0",
    "postcss-color-rgb": "7studio/postcss-color-rgb",
    "postcss-custom-media": "^6.0.0",
    "postcss-custom-properties": "^6.1.0",
    "postcss-import": "^10.0.0",
    "postcss-media-minmax": "^3.0.0",
    "postcss-reporter": "^5.0.0",
    "postcss-unicode-characters": "^1.0.1",
    "postcss-url": "^7.1.1",
    "pretty-bytes": "^4.0.2",
    "run-sequence": "^2.1.0",
    "stylelint": "^8.0.0"
  },
  "dependencies": {
  }
}

properties.json

{
	"media": {
		"--viewport-XS": "(max-width: 629px)",
		"--viewport-S": "(min-width: 630px) and (max-width: 944px)",
		"--viewport-M": "(min-width: 945px) and (max-width: 1049px)",
		"--viewport-L": "(min-width: 1050px) and (max-width: 1259px)",
		"--viewport-XL": "(min-width: 1260px)"
	},

	"properties": {
        "--base-maxwidth": "1240px",
		"--base-color": "#444",
    	"--base-bgcolor": "#fff",
    	"--base-font": "1em/1.375 sans-serif",
        "--base-fontsize": "16px",
    	"--base-lineheight": "1.375em",

		"--grid-column-gap": "20px",
		"--grid-row-gap": "1.375rem",

		"--color-grey": "#666",
		"--color-darkgrey": "#444",
		"--color-blue": "#0073aa"
	}
}