postcss.gulpfile.js

/** 
 * Gulpfile only for postcss usage
 * 
 * Good for WP
 * 
 * Direcotry structure:
 * -/
 *  |-/post-css/
 *             |- style.css
 *  |-/css/
 *        |- style.css //compiled
 *        |- style.css.map //sourcemap
 **/
 
var gulp = require('gulp');
var sourcemaps = require('gulp-sourcemaps');
var postcss = require('gulp-postcss');

gulp.task('css', function () {
  return (
    gulp.src('./post-css/style.css')
      .pipe(sourcemaps.init())
      .pipe(postcss([
        require("postcss-import")(),
        require("postcss-url")(),
        require("precss")(),
        require("postcss-cssnext")(),
        require("postcss-browser-reporter")(),
        require("postcss-reporter")()
      ]))
      .pipe(sourcemaps.write('.', {
        includeContent: false,
        sourceRoot: '/post-css/'
      }))
      .pipe(gulp.dest('./css/'))
  )
});

gulp.task('default', ['css', 'watch']);

gulp.task('watch', function () {
  return gulp.watch('./post-css/*.*', ['css']);
});

/***  (in package.json)
   "devDependencies": {
    "autoprefixer": "^6.3.3",
    "gulp": "^3.9.1",
    "gulp-postcss": "^6.1.0",
    "gulp-sourcemaps": "^1.6.0",
    "postcss": "^5.0.19",
    "postcss-browser-reporter": "^0.4.0",
    "postcss-cssnext": "^2.5.1",
    "postcss-font-magician": "^1.4.0",
    "postcss-import": "^8.0.2",
    "postcss-reporter": "^1.3.3",
    "postcss-url": "^5.1.1",
    "precss": "^1.4.0",
    "reset.css": "^2.0.2"
  }
 **/