PostCSS setup (imports, vars, autoprefix, minify) with and without Gulp

gulp-postcss.js

const gulp = require('gulp');
const postcss = require('gulp-postcss');
const rename = require('gulp-rename');
const sourcemaps = require('gulp-sourcemaps');

gulp.src('./src/index.css')
    .pipe(sourcemaps.init())
    .pipe(postcss([
        require('postcss-import'),          // combine imports into one file
        require('postcss-css-variables'),   // replace variables by their values
        require('autoprefixer'),            // vendor prefix for older browsers
        require('cssnano')                  // minify css
    ]))
    .pipe(rename('demo-viewer.css'))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('dist/'));

postcss.js

const fs = require('fs');
const postcss = require('postcss');

const inputFilename = 'src/index.css';
const outputDir = 'dist/';
const outputFilename = 'dist/demo-viewer.css';

postcss([
        require('postcss-import'),          // combine imports into one file
        require('postcss-css-variables'),   // replace variables by their values
        require('autoprefixer'),            // vendor prefix for older browsers
        require('cssnano')                  // minify css
    ])
    .process(fs.readFileSync(inputFilename), {
        from: inputFilename,
        to: outputFilename.substr(outputDir.length), // file path relative to output dir
        map: { inline: false }
    })
    .then(result => {
        fs.writeFileSync(outputFilename, result.css);
        if (result.map) {
            fs.writeFileSync(`${outputFilename}.map`, result.map);
        }
    });