Skip to content

Instantly share code, notes, and snippets.

@jsanders
Created October 27, 2015 02:15
Show Gist options
  • Save jsanders/361f15a1bd14aef0bd80 to your computer and use it in GitHub Desktop.
Save jsanders/361f15a1bd14aef0bd80 to your computer and use it in GitHub Desktop.
Gulp + ES 2015 / Babel + PostCSS + Lost + BrowserSync
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']);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment