colorify/gulpfile.js

a collection of color tools

/*eslint prefer-template: 0, no-console: 0 */
const cssmin = require('gulp-cssmin');
const eslint = require('gulp-eslint');
const fs = require('fs');
const gulp = require('gulp');
const gutil = require('gulp-util');
const imagemin = require('gulp-imagemin');
const less = require('gulp-less');
const marked = require('marked');
const rimraf = require('gulp-rimraf');
const size = require('gulp-size');
const webpack = require('webpack');
const WebpackDevServer = require('webpack-dev-server');

const port = 8080;
const devDir = `${__dirname}/build/dev/colorify`;
const prodDir = `${__dirname}/build/prod`;
const files = {
	clean: [`${devDir}/*`, `${prodDir}/*`],
	lint: ['./app/js/**/*.js', './lib/**/*.js', './gulpfile.js'],
	readme: ['./README.md'],
	images: ['./app/img/**/*.png', './app/img/**/*.jpg', './app/img/**/*.gif'],
	svg: ['./app/svg/**/*.svg'],
	copy: ['./app/*.html', './app/favicon.ico'],
	styles: ['./app/less/**/*.less']
};
const webpackConfig = require('./webpack.config.js');

const displaySize = function (title) {
	return size({
		title: title || '',
		showFiles: true
	});
};

gulp.task('clean', function () {
	return gulp.src(files.clean, {
			read: false
		})
		.pipe(rimraf());
});

gulp.task('lint', function () {
	return gulp.src(files.lint)
		// eslint() attaches the lint output to the eslint property
		// of the file object so it can be used by other modules.
		.pipe(eslint())
		// eslint.format() outputs the lint results to the console.
		// Alternatively use eslint.formatEach() (see Docs).
		.pipe(eslint.format('stylish'))
		// To have the process exit with an error code (1) on
		// lint error, return the stream and pipe to failAfterError last.
		.pipe(eslint.failAfterError());
});

gulp.task('styles', function () {
	gulp.src('./app/less/app.less')
		.pipe(less())
		.pipe(gulp.dest(devDir + '/css/'))
		.pipe(displaySize('dev'))
		.pipe(cssmin())
		.pipe(gulp.dest(prodDir + '/css/'))
		.pipe(displaySize('prod'));
});

gulp.task('fonts', function () {
	gulp.src('./node_modules/bootstrap/dist/fonts/*')
		.pipe(gulp.dest(devDir + '/fonts/'))
		.pipe(gulp.dest(prodDir + '/fonts/'));
	gulp.src('./node_modules/font-awesome/fonts/*')
		.pipe(gulp.dest(devDir + '/fonts/'))
		.pipe(gulp.dest(prodDir + '/fonts/'));
});

gulp.task('images', function () {
	gulp.src(files.images)
		.pipe(imagemin())
		.pipe(gulp.dest(devDir + '/img/'))
		.pipe(gulp.dest(prodDir + '/img/'));
});

gulp.task('svg', function () {
	gulp.src(files.svg)
		.pipe(gulp.dest(devDir + '/svg'))
		.pipe(gulp.dest(prodDir + '/svg'));
});

gulp.task('copy', function () {
	gulp.src(files.copy)
		.pipe(gulp.dest(devDir))
		.pipe(gulp.dest(prodDir));
});

gulp.task('watch', function () {
	['lint', 'readme', 'images', 'svg', 'copy', 'styles'].forEach(function (name) {
		gulp.watch(files[name], [name]);
	});
});

gulp.task('readme', function () {
	const html = fs.readFileSync(`${__dirname}/README.md`, 'utf-8');
	const linkIndexStart = (/\n## Other Links/.exec(html)).index;
	const linkIndexEnd = (/\n## License/.exec(html)).index;
	console.log(linkIndexStart, linkIndexEnd);
	const main = marked(html.slice(0, linkIndexStart) + html.slice(linkIndexEnd));
	const links = marked(html.slice(linkIndexStart, linkIndexEnd));
	fs.writeFileSync(
		__dirname + '/app/js/Readme.js', [
			'/* autogenerated by gulpfile.js */',
			'exports.main = ' + JSON.stringify(main) + ';',
			'exports.links = ' + JSON.stringify(links) + ';'
		].join('\n'),
		'utf-8'
	);
});

gulp.task('webpack:prod', function (callback) {
	// modify some webpack config options
	const myConfig = Object.create(webpackConfig);
	myConfig.plugins = myConfig.plugins.concat(
		new webpack.DefinePlugin({
			'process.env': {
				// This has effect on the react lib size
				'NODE_ENV': JSON.stringify('production')
			}
		}),
		new webpack.optimize.DedupePlugin(),
		new webpack.optimize.UglifyJsPlugin()
	);
	myConfig.output.path = __dirname + '/build/prod/js';

	// run webpack
	webpack(myConfig, function (err, stats) {
		if (err) {
			throw new gutil.PluginError('webpack:build', err);
		}
		gutil.log('[webpack:build]', stats.toString({
			colors: true
		}));
		callback();
	});
});

// modify some webpack config options
const myDevConfig = Object.create(webpackConfig);
myDevConfig.devtool = 'sourcemap';
myDevConfig.debug = true;
// from: http://webpack.github.io/docs/webpack-dev-server.html
Object.keys(myDevConfig.entry).forEach(function (key) {
	myDevConfig.entry[key].unshift('webpack-dev-server/client?http://localhost:' + port);
});

// create a single instance of the compiler to allow caching
const devCompiler = webpack(myDevConfig);

gulp.task('webpack:dev', function (callback) {
	// run webpack
	devCompiler.run(function (err, stats) {
		if (err) {
			throw new gutil.PluginError('webpack:build-dev', err);
		}
		gutil.log('[webpack:build-dev]', stats.toString({
			colors: true
		}));
		callback();
	});
});

gulp.task('webpack-dev-server', function () {
	// modify some webpack config options
	const myConfig = Object.create(webpackConfig);
	myConfig.devtool = 'eval';
	myConfig.debug = true;
	// Start a webpack-dev-server
	new WebpackDevServer(webpack(myConfig), {
		path: __dirname + '/build/dev/colorify/js',
		publicPath: '/colorify/js',
		contentBase: __dirname + '/build/dev',
		historyApiFallback: {
			index: '/colorify/index.html'
		},
		stats: {
			colors: true
		}
	}).listen(port, 'localhost', function (err) {
		if (err) {
			throw new gutil.PluginError('webpack-dev-server', err);
		}
		gutil.log('[webpack-dev-server]', 'http://localhost:' + port + '/webpack-dev-server/index.html');
	});
});

gulp.task('build-clean', ['clean', 'build']);
gulp.task('build', ['lint', 'readme', 'fonts', 'images', 'svg', 'copy', 'styles', 'webpack:prod', 'webpack:dev']);
gulp.task('default', ['build', 'webpack-dev-server', 'watch']);

// handle errors
process.on('uncaughtException', function (e) {
	console.error(e);
});