Gulp configuration for my WordPress theme development

gulpfile.js

/*
Create package.json and install all packages:

1. npm init
2. npm install -g gulp
3. npm install gulp gulp-babel babel-preset-es2015 gulp-concat gulp-csso gulp-rename gulp-sass gulp-uglify gulp-watch browser-sync --save-dev

Expected file structure:

./css/src/*.scss 
In this folder you can have as much SASS files as you want, but you will need to have a "theme.scss" file that will import
all other SASS files, because GULP would look for that file in order to convert it to CSS syntax. 

./js/src/*.js -> You can have as much JS files as you want. 

commands:
"gulp" - will watch all your theme files and reload/inject on change.
"gulp production" - will minify CSS and JS files. 

NOTE - I'm using localhost:8888 for proxy in browser-sync config. Change it accordingly. 

*/

var gulp        = require('gulp');
var concat      = require('gulp-concat');
var sass        = require('gulp-sass');
var watch       = require('gulp-watch');
var babel       = require('gulp-babel');
var browserSync = require('browser-sync');
var csso        = require('gulp-csso');
var uglify      = require('gulp-uglify');
var rename      = require('gulp-rename');


gulp.task('scripts', function() {
    gulp.src('./js/src/*.js')
        .pipe(concat('theme.js'))
        .pipe(babel({ presets: ['es2015'] }))
        .pipe(gulp.dest('./js/'));
});

gulp.task('sass', function() {
    gulp.src('./css/src/theme.scss')
        .pipe(sass())
        .pipe(gulp.dest('./css'));
});

//run "gulp production" so you can serve minifed files when you deploy to production
gulp.task('production', function() {
    gulp.src('./js/theme.js')
        .pipe(uglify())
        .pipe(rename({
             suffix: '.min'
         }))
        .pipe(gulp.dest('./js'));

    gulp.src('./css/theme.css')
        .pipe(csso())
        .pipe(rename({
             suffix: '.min'
         }))
        .pipe(gulp.dest('./css'));
});

gulp.task('watch',['scripts', 'sass'], function () {
    gulp.watch('./js/src/*.js' , ['scripts']);
    gulp.watch('./css/src/*.scss' , ['sass']);
});

gulp.task('sync', function() {
    var options = {
        proxy: 'localhost:8888',
        port: 3000,
        files: [
            '**/*.*'
        ],
        ghostMode: {
            clicks: true,
            location: false,
            forms: true,
            scroll: true
        },
        injectChanges: true,
        logFileChanges: true,
        logLevel: 'debug',
        logPrefix: 'gulp-patterns',
        notify: true,
        reloadDelay: 0
    };
    browserSync(options);
});

//When you run "gulp" it will run all the tasks that you specify in the array. Notice that the "production" task
//is not specified, because it should be used at deployment time when everything is done. 
gulp.task('default', ['scripts', 'sass', 'watch', 'sync']);

This assumes that you structure your folders in a certain way. If not, change it. Very easy. It also assumes you use SASS and write ES6, again no problem to remove or just ignore it. You can write regular CSS and JS in these files.

Have you checked out WPGulp? It is being used in 100+ projects. I built it last year; have been actively maintaining and improving it.
https://github.com/ahmadawais/WPGulp/