Magento build system including sass, webpack and browser-sync

.babelrc

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 2 versions", "safari >= 7"]
      }
    }],
    "babili"
  ]
}

gulpfile.js

/* jshint node: true */
module.export = (function(){
    "use strict";

    const theme_name    = '$THEME NAME$', // Edit
        gulp            = require('gulp'),
        sass            = require('gulp-sass'),
        sourcemaps      = require('gulp-sourcemaps'),
        postcss         = require('gulp-postcss'),
        uglify          = require('gulp-uglify'),
        concat          = require('gulp-concat'),
        watch           = require('gulp-watch'),
        gutil           = require('gulp-util'),
        webpackStream   = require('webpack-stream'),
        webpack         = require('webpack'),
        del             = require('del'),
        autoprefixer    = require('autoprefixer'),
        bs              = require('browser-sync').create(),
        path            = require('path'),
        wpConfig        = require('./webpack.config'),
        skin_url        = `./skin/frontend/${theme_name}/default/`,
        theme_url       = `./app/design/frontend/${theme_name}/default/`,
        base_url        = '127.0.0.1/' + __dirname.split(path.sep).pop() + '/'; //if you run magento from folder or change to local url


    gulp.task('sass', () => {
        let processors = [
            autoprefixer({remove:true})
        ];
        return gulp.src(skin_url +'scss/*.scss')
            .pipe(sourcemaps.init())
            .pipe(sass({
                includePaths: ['./skin/frontend/rwd/default/scss'],
                outputStyle: 'compressed'
            }).on('error', sass.logError))
            .pipe(postcss(processors))
            .pipe(sourcemaps.write('./'))
            .pipe(gulp.dest(skin_url +'css/'))
            .pipe(bs.stream({match: '**/*.css'}));
    });

    gulp.task('js', ['js:uglify', 'js:webpack' ]);

    gulp.task('js:uglify', () => {
        return gulp.src(skin_url +'js/src/**/*')
            .pipe(sourcemaps.init())
            .pipe(uglify())
            .pipe(sourcemaps.write('./'))
            .pipe(gulp.dest(skin_url + 'js/'))
            .pipe(bs.stream());
    });

    gulp.task('js:webpack', () => {
        wpConfig.output.publicPath = base_url + skin_url.replace('./','') + 'js/';
        return gulp.src(skin_url +'js_src/entry.js')
            .pipe(webpackStream(wpConfig, webpack))
            .pipe(gulp.dest(skin_url + 'js/'))
            .pipe(bs.stream());
    });

    gulp.task('clean', () => {
        return del(['./var/cache']).then(bs.reload);
    });

    gulp.task('watch', cb => {
        bs.init({
            open: false,
            proxy: base_url
        });
        watch(skin_url + 'scss/**/*', function(){ gulp.start('sass'); });
        watch(skin_url + 'js_src/**/*', function(){ gulp.start('js:webpack'); });
        watch(skin_url + 'js/src/**/*', function(){ gulp.start('js:uglify'); });
        watch(skin_url + 'js/**/*', function(){ bs.reload(); });
        watch(theme_url + '**/*', function(){ gulp.start('clean'); });
        cb();
    });

    gulp.task('watch:styles', cb => {
        bs.init({
            open: false,
            proxy: base_url
        });
        watch(skin_url + 'scss/**/*', function(){ gulp.start('sass'); });
        cb();
    });

    gulp.task('default', ['sass', 'js', 'clean']);

})();

package.json

{
  "name": "$PROJECT_NAME$",
  "version": "1.0.0",
  "description": "",
  "devDependencies": {
    "autoprefixer": "^6.3.7",
    "babel-core": "^6.24.1",
    "babel-loader": "^6.4.1",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "babel-preset-babili": "^0.0.12",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-env": "^1.4.0",
    "browser-sync": "^2.18.8",
    "del": "^2.2.0",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^3.1.0",
    "gulp-concat": "^2.6.0",
    "gulp-plumber": "^1.1.0",
    "gulp-postcss": "^6.1.1",
    "gulp-sass": "^3.1.0",
    "gulp-sourcemaps": "^2.5.1",
    "gulp-uglify": "^2.1.2",
    "gulp-util": "^3.0.7",
    "gulp-watch": "^4.3.8",
    "uglify-js": "git://github.com/mishoo/UglifyJS2#harmony",
    "uglifyjs-webpack-plugin": "^0.4.2",
    "webpack": "^2.4.1",
    "webpack-stream": "^3.2.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  }
}

webpack.config.js

const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

const config = {
    devtool: 'cheap-source-map',
    output: {
        filename: 'bundle.js'
    },
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /(node_modules|bower_components)/,
            use: [{
                loader: 'babel-loader',
                options: {
                    presets: [['es2015', {modules: false}]],
                    plugins: ['syntax-dynamic-import']
                }
            }]
        }]
    },
    plugins:[
        new UglifyJSPlugin({
            compress: {
                warnings: false
            },
            sourceMap: true
        })
    ]
};

module.exports = config;