Gulp webpack setup

environment-helper.js

var util = require('gulp-util');

var environmentHelper = function (util) {

    return function get(key, fallbackValue) {
        var value = util.env[key];
        var valueType = 'value';

        if (typeof value === 'undefined') {
            value = fallbackValue;
            valueType = 'fallbackValue';
        }

        return value;
    };
}(util);

exports.get = environmentHelper;

gulp-tasks-core.coffee

exports.init = (gulp, logExit, logContinue, fileserver) ->
	gulp = require 'gulp'
	del = require 'del'

	gulp.task 'default', ['dev']

	gulp.task 'dist', ['_dist']

	gulp.task 'dist-server', ['_dist-server']

	gulp.task 'test', ['_test-all']
	gulp.task 'test-all', ['_test-all']
	gulp.task 'test-unit', ['_test-unit']

	gulp.task 'dev', ['_index-html', '_resources'], ->
		return fileserver.dev 'app'

	gulp.task 'clean', (cb) ->
		del ['app/**/*', '!app/bower_components{,/**}', './dist', './coverage'], cb

gulp-tasks-dist.coffee

exports.init = (gulp, logExit, logContinue, target, fileserver) ->
	template = require 'gulp-template'
	rename = require 'gulp-rename'
	del = require 'del'
	runSequence = require 'run-sequence'
	gutil = require 'gulp-util'
	webpack = require 'webpack'
	webpackConfig = require('../webpack.config.js')

	gulp.task '_dist', (done) ->
		runSequence [
			'_clean-dist'
		], [
			'_dist-index-html'
			'_dist-resources'
			'webpack:dist'
		], done

	gulp.task '_dist-server', (done) ->
		fileserver.dist 'dist'

	gulp.task('webpack:dist', (done) ->
		# modify some webpack config options
		distConfigParams = {}

		distConfigParams.entry = {
			app: ['./src/scripts/main.coffee']
		}

		distConfigParams.output = {
			path: target
		}

		distConfigParams.plugins = [
			new webpack.DefinePlugin({
				'process.env':
					# This has effect on the react lib size
					'NODE_ENV': JSON.stringify('production')
				DEV: false
			})
			new webpack.NormalModuleReplacementPlugin(
				/resources\/app\/config$/,
				(result) ->
					result.request = result.request.replace '/app/', '/dist/'
			)
			new webpack.optimize.DedupePlugin()
			new webpack.optimize.UglifyJsPlugin({
				compressor: {
					warnings: false
				}
				sourceMap: false
				mangle: false
			})
		]

		distConfig = webpackConfig(distConfigParams)

		# run webpack
		webpack(distConfig, (err, stats) ->
			if (err) then throw new gutil.PluginError('webpack:build', err)

			gutil.log('[webpack:build]', stats.toString(
				colors: true
			))

			done()
		)
	)

	gulp.task '_dist-index-html', ->
		return gulp.src 'src/index.production.html'
			.pipe template tag: gutil.env.tag
			.pipe rename 'index.html'
			.pipe gulp.dest target

	gulp.task '_clean-dist', (cb) ->
		del ['./dist'], cb

gulp-tasks-resources.coffee

COMMON_PATH = 'src/resources/common/*'
APP_PATH = 'app/'

copyResources = (gulp, destination) ->
	return gulp.src COMMON_PATH
		.pipe gulp.dest destination

exports.init = (gulp, logExit, logContinue, target, skipWatch) ->
	gulp.task '_dist-resources', ->
		return copyResources(gulp, target)

	gulp.task '_resources', ->
		return copyResources(gulp, APP_PATH)

	gulp.task '_index-html', ->
		return gulp.src 'src/index.html'
			.pipe gulp.dest APP_PATH

gulp-tasks-test.coffee

exports.init = (gulp) ->
	webpack = require('webpack')
	karma = require('karma').server
	path = require 'path'

	# karma doesn't work when run in parallell with another task, so run it first
	gulp.task '_test-all', ['_test-unit'], (done) ->
		done

	gulp.task '_test-unit', (done) ->
		karma.start
			configFile: path.resolve(__dirname, '..', 'karma.conf.js')
			singleRun: true
			browsers: ['PhantomJS']
		, done

	# Useful for testing that the build works without any output
	gulp.task 'test-build', (done) ->
		webpackBase = require('../webpack.config.js')

		webpackConfig = webpackBase
			entry:
				main: './src/scripts/main.coffee'

		testCompiler = webpack(webpackConfig)
		testCompiler.compile (err, stats) ->
			len = stats.errors.length

			if len == 0
				console.info 'Build completed without errors'
			else
				for error in stats.errors
					console.error error.message

			done()

Gulpfile.coffee

gulp = require('gulp')
util = require('gulp-util')
environmentHelper = require('./gulp/environmentHelper')
fileserver = require('./fileserver.coffee')
target = environmentHelper.get('target', 'dist/')
skipWatch = environmentHelper.get('skipWatch', 'false')
fs = require 'fs'

logExit = (error) ->
	util.log util.colors.red(error)
	process.exit 1
	return

logContinue = (error) ->
	if skipWatch is 'true'
		logExit error
	else
		util.log util.colors.red error
		@emit? 'end'
	return

# Make sure that we have a private-config first.
confFile = 'src/resources/common/private-config.json'
if not fs.existsSync confFile
	fs.writeFileSync confFile, '{}'

# empty task that just initiates gulp and creates the config file
gulp.task 'init'

require './gulp/gulp-tasks-resources.coffee'
	.init gulp, logExit, logContinue, target, skipWatch

require './gulp/gulp-tasks-core.coffee'
	.init gulp, logExit, logContinue, fileserver

require './gulp/gulp-tasks-dist.coffee'
	.init gulp, logExit, logContinue, target, fileserver

require './gulp/gulp-tasks-test.coffee'
	.init gulp

webpack.config.js

var path = require('path');
var _ = require('lodash');
var webpack = require('webpack');
var RHLMatches = /--view|viewcomponents\//;
var config = require('./app.config');
var webpackCommon = {
	cache: true,
	node: {
		__filename: true
	},
	output: {
		path: path.join(__dirname, 'app/'),
		publicPath: '/',
		filename: '[name]-bundle.js',
		chunkFilename: '[chunkhash].js'
	},
	module: {
		loaders: [
			{ test: /\.woff$/, loader: 'url-loader?prefix=font/&limit=5000&mimetype=application/font-woff' },
			{ test: /\.ttf$|\.eot$/, loader: 'file-loader?prefix=font/' },
			{
				test: /\.coffee$/,
				exclude: RHLMatches,
				loader: 'jshint-loader!coffee-loader'
			}, // enable post compile jshint, rules/flags at the bottom]
			{ test: /\.json$/, loader: 'json-loader' },
			{ test: /\.svg$/, loader: 'raw-loader' },
			{ test: /\.css$/, loaders: [
				'style-loader',
				'css-loader'
			]},
			{ test: /\.scss$/, loaders: [
				'style-loader',
				'css-loader',
				'autoprefixer-loader?{browsers:["last 2 version", "ie 10", "Android 4"]}',
				'sass-loader'
			]},
			{ test: RHLMatches, loader: 'react-hot!coffee-loader' },
			{ test: /js-breakpoints\/breakpoints\.js$/, loader: 'exports-loader?window.Breakpoints' }	// special loader for js-breakpoints since it's not a proper module
		]
	},
	resolve: {
		alias: {
			'Breakpoints': 'js-breakpoints/breakpoints',
			'polyfill-dataset': 'html5-polyfills/dataset',
			'elements': 'react-coffee-elements',
			'underscore': 'lodash'
		},
		extensions: ['', '.webpack.js', '.web.js', '.js', '.coffee', '.json'],
		modulesDirectories: ['node_modules', 'scripts', 'app/bower_components', 'web_modules']
	},
	plugins: [
		new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, new RegExp(_.pluck(config.languages, 'moment-key').join('|')))
	],
	jshint: {
		bitwise: false,
		boss: true,
		curly: false,
		eqnull: true,
		expr: true,
		newcap: false,
		quotmark: false,
		shadow: true,
		strict: false,
		sub: true,
		undef: true,
		unused: 'vars',
		globals: {
			DEV: false,
			DOMTokenList: false
		}
	}
};

module.exports = function(config) {
    return _.merge({}, webpackCommon, config, function(a, b) {
        return _.isArray(a) ? a.concat(b) : undefined;
    });
};