styles1.js

import gulp from 'gulp';
import gulpLoadPlugins from 'gulp-load-plugins';
import browserSync from 'browser-sync';
import {bs} from '../Gulpfile.babel';
import config from './_config';

const $ = gulpLoadPlugins();
const reload = browserSync.reload;

export default () => {
  // Browsers we support
  const autoprefixerBrowsers = [
    'last 2 versions',
    'ie >= 9'
  ];

  return gulp.src(config.sass.src)
    // Only pass through changed files
    .pipe($.changed(config.css.path, {extension: '.css'}))

    // Initialise source maps
    .pipe($.sourcemaps.init())

    // Process our SCSS to CSS
    .pipe($.sass({
      precision: 10,
      stats: true
    }).on('error', $.sass.logError))

    // PostCSS our vendor prefixes
    .pipe($.autoprefixer(autoprefixerBrowsers))

    // Convert viable px units to REM
    .pipe($.pxtorem())

    // Place our compiled CSS in a tmp folder
    .pipe(gulp.dest('.tmp'))

    // Minify our CSS in the temp folder
    .pipe($.if('*.css', $.minifyCss()))

    // Write our source map, the root is needed for Django funnyness
    .pipe($.sourcemaps.write('./', {
      includeContent: false,
      sourceRoot: () => {
        return '../../static'
      }
    }))

    // Place our CSS in the location we link to
    .pipe(gulp.dest(config.css.path))

    // Stream the changes to Browser Sync
    .pipe(bs.stream({match: '**/*.css'}))

    // Spit out the size to the console
    .pipe($.size({title: 'styles'}));
}

import gulp from 'gulp';
import gulpLoadPlugins from 'gulp-load-plugins';
import browserSync from 'browser-sync';
import {bs} from '../Gulpfile.babel';
import config from './_config';

const $ = gulpLoadPlugins();
const reload = browserSync.reload;

export default () => {
  // Browsers we support
  const autoprefixerBrowsers = [
    'last 2 versions',
    'ie >= 9'
  ];

  return gulp.src(config.sass.src)
    .pipe($.changed(config.css.path, {extension: '.css'}))
    .pipe($.sourcemaps.init())
    .pipe($.sass({
      precision: 10,
      stats: true
    }).on('error', $.sass.logError))
    .pipe($.autoprefixer(autoprefixerBrowsers))
    .pipe($.pxtorem())
    .pipe(gulp.dest('.tmp'))
    .pipe($.if('*.css', $.minifyCss()))
    .pipe($.sourcemaps.write('./', {
      includeContent: false,
      sourceRoot: () => {
        return '../../static'
      }
    }))
    .pipe(gulp.dest(config.css.path))
    .pipe(bs.stream({match: '**/*.css'}))
    .pipe($.size({title: 'styles'}));
}