gulp-webpack

gulpfile.js

var gulp          = require('gulp');
var sass          = require('gulp-sass');
var watch         = require('gulp-watch');
var browserSync   = require('browser-sync');
var csso          = require('gulp-csso');
var uglify        = require('gulp-uglify');
var postcss       = require('gulp-postcss');
var autoprefixer  = require('autoprefixer');
var postcssAnt    = require('postcss-ant');
var webpack       = require('webpack');
var webpackStream = require('webpack-stream-fixed');

function swallowError (error) {
  //Prints details of the error in the console
  console.log(error.toString());
  this.emit('end')
}

gulp.task('sass', function() {
    gulp.src('./resources/assets/sass/app.scss')
        .pipe(sass())
        .on('error', swallowError)
        .pipe(postcss([ autoprefixer(), postcssAnt() ]))
        .pipe(gulp.dest('./public/css'))
        //For auto injecting the CSS into the browser. 
        .pipe(browserSync.stream({match: '**/*.css'}));
});

gulp.task('sass-vendor', function() {
    //So we can use glyphicons. 
    gulp.src('node_modules/bootstrap-sass/assets/fonts/bootstrap/*.{eot,svg,ttf,woff,woff2}')
        .pipe(gulp.dest('./public/build/fonts/bootstrap'));
    gulp.src('./resources/assets/sass/vendor.scss')
        .pipe(sass())
        .on('error', swallowError)
        .pipe(gulp.dest('./public/css'))
        .pipe(browserSync.stream({match: '**/*.css'}));
});

gulp.task('webpack', function() {
  return gulp.src('./resources/assets/js/app.js')
    .pipe(webpackStream( require('./webpack.config.js'), webpack ))
    .on('error', swallowError)
    .pipe(gulp.dest('./public/js'));
});

gulp.task('production', function() {
    gulp.src('./public/js/app.js')
        .pipe(uglify())
        .pipe(gulp.dest('./public/js'));

    gulp.src('./public/css/app.css')
        .pipe(csso())
        .pipe(gulp.dest('./public/css'));

    gulp.src('./public/css/admin.css')
        .pipe(csso())
        .pipe(gulp.dest('./public/css'));

    gulp.src('./public/css/vendor.css')
        .pipe(csso())
        .pipe(gulp.dest('./public/css'));
});

gulp.task('plugin-sass', function() {
    gulp.src('../../plugins/data-for-file/assets/css/src/style.scss')
        .pipe(sass())
        .on('error', swallowError)
        .pipe(postcss([ autoprefixer() ]))
        .pipe(gulp.dest('../../plugins/data-for-file/assets/css'))
        .pipe(browserSync.stream({match: '**/*.css'}));
});

gulp.task('watch', function () {
    //Webpack will watch the asser files. All we need is to watch the compiled files.
    gulp.watch('./public/js/*.js').on('change', browserSync.reload);
    gulp.watch(['./resources/assets/sass/*.scss', './resources/assets/sass/components/*.scss'], ['sass']);
    gulp.watch(['./resources/assets/sass/vendor.scss'], ['sass-vendor']);
});

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

gulp.task('default', ['webpack', 'sass', 'sass-vendor', 'watch', 'sync']);

postcss.config.js

module.exports = {
	plugins: [
		require('postcss-ant'),
	    require('autoprefixer')
	]
};

webpack.config.js

const path = require('path');

const config = {
	watch: true,
	entry: {
		app: './resources/assets/js/app.js',
		vendor: './resources/assets/js/vendor.js',
	},
	output: {
		filename: '[name].js',
		path: path.resolve(__dirname, 'public/js/'),
	},
	module: {
		rules: [
			{
				test: /\.js$/,
				exclude: /(node_modules|bower_components)/,
				loader: 'babel-loader',
				query: {
					presets: ['es2015']
				}
			}
		]
	},
	plugins: []
};

module.exports = config;