estimating-trends/tasks/styles.js

import config from '../config';
import path from 'path';
import gulp from 'gulp';
import browsersync from 'browser-sync';
import autoprefixer from 'autoprefixer';
import cssnano from 'cssnano';

import plumber from 'gulp-plumber';
import sourcemaps from 'gulp-sourcemaps';
import sass from 'gulp-sass';
import postcss from 'gulp-postcss';
import rename from 'gulp-rename';

const target = config.currentTarget;

/**
 * Transform sass / scss to css, add either source maps or minify
 * based on target (development / production)
 *
 * @param cb: callback handler passed by gulp, signals task completion when called
 */
const styles = (cb) => {

  const scssFile = path.join(
    config.paths.src,
    config.paths.sass,
    `${config.fileNames.css}.scss`
  );

  const destination = path.join(
    config.paths.dest,
    config.paths.assets,
    config.paths.css
  );

  switch (target) {

    case 'development':
      gulp.src(scssFile)
        .pipe(plumber())
        .pipe(sourcemaps.init())
        .pipe(sass(config.sass[target]))
        .pipe(
          postcss([autoprefixer()])
        )
        .pipe(
          sourcemaps.write({
            sourceRoot: './'
          })
        )
        .pipe(gulp.dest(destination))
        .pipe(
          browsersync.reload({ stream: true })
        );
      break;

    case 'production':
      gulp.src(scssFile)
        .pipe(sass(config.sass[target]))
        .pipe(
          postcss([
            autoprefixer(),
            cssnano({ safe: true })
          ])
        )
        .pipe(
          rename(`${config.fileNames.css}${config.targets[target].delimiter}${config.targets[target].infix}.css`)
        )
        .pipe(gulp.dest(destination));
      break;

    default:
      console.error('invalid target');
  }

  cb();
};

export {
  styles
};