Gulp + ES 2015 / Babel + PostCSS + Lost + BrowserSync

gulpfile.babel.js

import gulp from 'gulp';
import postcss from 'gulp-postcss';
import sourcemaps from 'gulp-sourcemaps';
import cssnano from 'cssnano';
import autoprefixer from 'autoprefixer';
import lost from 'lost';
import {create as bsCreate} from 'browser-sync';
const browserSync = bsCreate();

const dirs = {
  src: 'src',
  dest: 'dist',
};

const cssPaths = {
  srcFiles: `${dirs.src}/css/*.css`,
  destDir: `${dirs.dest}/css`,
}

gulp.task('css', () => {
  return gulp.src(cssPaths.srcFiles)
    .pipe(sourcemaps.init())
    .pipe(postcss([
      lost(),
      autoprefixer(),
      cssnano(),
    ]))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest(cssPaths.destDir));
});

gulp.task('browser-sync', () => {
  browserSync.init({
    server: {
      baseDir: "./"
    }
  });
});

gulp.task('watch', () => {
  gulp.watch(cssPaths.srcFiles, ['css', browserSync.reload]);
  gulp.watch("*.html", browserSync.reload);
});

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