Codepen.io extract - gulp task

gulpfile.js

// # npm i --save-dev gulp gulp-sass gulp-sourcemaps gulp-babel babel-preset-es2015 browser-sync gulp-autoprefixer

'use strict';

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    sourcemaps = require('gulp-sourcemaps'),
    babel = require('gulp-babel'),
    browserSync = require('browser-sync').create(),
    autoprefixer = require('gulp-autoprefixer');

gulp.task('sass', function () {
    return gulp.src('scss/*.scss')
               .pipe(sourcemaps.init())
               .pipe(sass().on('error', sass.logError))
               .pipe(autoprefixer({
                   browsers: [ 'last 2 versions' ],
                   cascade: false
               }))
               .pipe(sourcemaps.write())
               .pipe(gulp.dest('css/'))
               .pipe(browserSync.stream());
});

gulp.task('babel', function () {
    return gulp.src('babel/*.babel')
               .pipe(sourcemaps.init())
               .pipe(babel({
                   presets: [ 'es2015' ]
               }))
               .pipe(sourcemaps.write())
               .pipe(gulp.dest('js/'))
});

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

gulp.task('default', [ 'sass', 'babel', 'browser-sync' ], function () {
    gulp.watch('scss/*.scss', [ 'sass' ]);
    gulp.watch('babel/*.babel', [ 'babel' ]);

    gulp.watch('*.html').on('change', browserSync.reload);
    gulp.watch('js/*.js').on('change', browserSync.reload);
});