Babel ES6, SCSS setup for WordPress Plugin (gulp tasks included)

gulpfile.js

// Load Gulp...of course
var gulp         = require( 'gulp' );

// CSS related plugins
var sass         = require( 'gulp-sass' );
var autoprefixer = require( 'gulp-autoprefixer' );
var minifycss    = require( 'gulp-uglifycss' );

// JS related plugins
var concat       = require( 'gulp-concat' );
var uglify       = require( 'gulp-uglify' );
var babelify     = require( 'babelify' );
var browserify   = require( 'browserify' );
var source       = require( 'vinyl-source-stream' );
var buffer       = require( 'vinyl-buffer' );
var stripDebug   = require( 'gulp-strip-debug' );

// Utility plugins
var rename       = require( 'gulp-rename' );
var sourcemaps   = require( 'gulp-sourcemaps' );
var notify       = require( 'gulp-notify' );
var plumber      = require( 'gulp-plumber' );
var options      = require( 'gulp-options' );
var gulpif       = require( 'gulp-if' );

// Browers related plugins
var browserSync  = require( 'browser-sync' ).create();
var reload       = browserSync.reload;

// Project related variables
var projectURL   = 'http://localhost/wp1/*';

var styleSRC     = './frontend/scss/style.scss';
var styleAdminSRC = './frontend/scss/admin.scss';
var styleURL     = './frontend/css/';
var mapURL       = './';

var jsSRC        = './frontend/es/';
var jsFront      = 'main.js';
var jsAdmin      = 'admin.js';
var jsFiles      = [ jsFront, jsAdmin ];
var jsURL        = './frontend/js/';

var imgSRC       = './frontend/images/**/*';
var imgURL       = './frontend/images/';

var fontsSRC     = './frontend/fonts/**/*';
var fontsURL     = './frontend/fonts/';

var styleWatch   = './frontend/scss/**/*.scss';
var jsWatch      = './frontend/es/**/*.js';
var imgWatch     = './frontend/images/**/*.*';
var fontsWatch   = './frontend/fonts/**/*.*';
var phpWatch     = './**/*.php';

// Tasks
gulp.task( 'browser-sync', function() {
	browserSync.init({
		proxy: projectURL,
		injectChanges: true,
		open: false
	});
});

gulp.task( 'styles', function() {
	gulp.src( [ styleSRC, styleAdminSRC ] )
		.pipe( sourcemaps.init() )
		.pipe( sass({
			errLogToConsole: true,
			outputStyle: 'compressed'
		}) )
		.on( 'error', console.error.bind( console ) )
		.pipe( autoprefixer({ browsers: [ 'last 2 versions', '> 5%', 'Firefox ESR' ] }) )
		.pipe( rename( { suffix: '.min' } ) )
		.pipe( sourcemaps.write( mapURL ) )
		.pipe( gulp.dest( styleURL ) )
		.pipe( browserSync.stream() );
});

gulp.task( 'js', function() {
	jsFiles.map( function( entry ) {
		return browserify({
			entries: [jsSRC + entry]
		})
		.transform( babelify, { presets: [ 'es2015' ] } )
		.bundle()
		.pipe( source( entry ) )
		.pipe( rename( {
			extname: '.min.js'
        } ) )
		.pipe( buffer() )
		.pipe( gulpif( options.has( 'production' ), stripDebug() ) )
		.pipe( sourcemaps.init({ loadMaps: true }) )
		.pipe( uglify() )
		.pipe( sourcemaps.write( '.' ) )
		.pipe( gulp.dest( jsURL ) )
		.pipe( browserSync.stream() )
        .on('error', function (err) {
            console.log(err.toString());
            this.emit('end');
        });
	});
 });

gulp.task( 'images', function() {
	triggerPlumber( imgSRC, imgURL );
});

gulp.task( 'fonts', function() {
	triggerPlumber( fontsSRC, fontsURL );
});

function triggerPlumber( src, url ) {
	return gulp.src( src )
	.pipe( plumber() )
	.pipe( gulp.dest( url ) );
}

 gulp.task( 'default', ['styles', 'js', 'images', 'fonts'], function() {
	gulp.src( jsURL + 'admin.min.js' )
		.pipe( notify({ message: 'Assets Compiled!' }) );
 });

 gulp.task( 'watch', ['default', 'browser-sync'], function() {
	gulp.watch( phpWatch, reload );
	gulp.watch( styleWatch, [ 'styles' ] );
	gulp.watch( jsWatch, [ 'js', reload ] );
	gulp.watch( imgWatch, [ 'images' ] );
	gulp.watch( fontsWatch, [ 'fonts' ] );
	gulp.src( jsURL + 'admin.min.js' )
		.pipe( notify({ message: 'Gulp is Watching, Happy Coding!' }) );
 });

package.json

{
	"name": "videobox-plugin",
	"version": "1.0.0",
	"description": "Videobox Plugin for extending functionalities",
	"author": "Cojocaru <[email protected]>",
	"repository": {
		"type": "git",
		"url": "https://github.com/cojocaru3/videobox-plugin"
	},
	"keywords": [
		"wordpress",
		"plugin",
		"videobox"
	],
	"dependencies": {
		"jquery": "^3.2.1"
	},
	"devDependencies": {
		"babel-preset-es2015": "^6.24.1",
		"babelify": "^7.3.0",
		"browser-sync": "^2.11.1",
		"browserify": "^14.1.1",
		"browserify-shim": "^3.8.14",
		"gulp": "^3.9.1",
		"gulp-autoprefixer": "^3.1.1",
		"gulp-concat": "^2.5.2",
		"gulp-if": "^2.0.2",
		"gulp-notify": "^3.0.0",
		"gulp-options": "^1.1.1",
		"gulp-plumber": "^1.1.0",
		"gulp-rename": "^1.2.0",
		"gulp-sass": "^3.1.0",
		"gulp-sourcemaps": "^2.6.0",
		"gulp-strip-debug": "^1.1.0",
		"gulp-uglify": "^2.0.0",
		"gulp-uglifycss": "^1.0.4",
		"vinyl-buffer": "^1.0.0",
		"vinyl-source-stream": "^1.1.0"
	},
	"babel": {
		"presets": [
			"es2015"
		]
	},
	"browserify": {
		"transform": [ "browserify-shim" ]
	},
	"browser": {
		"jquery": "./node_modules/jquery/dist/jquery.js"
	},
	"browserify-shim": {
	    "jquery": "$"
	},
	"license": "GPL-3.0"
}