openecomp-ui/gulpfile.js

/*-
 * ============LICENSE_START=======================================================
 * SDC
 * ================================================================================
 * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
 * ================================================================================
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 * ============LICENSE_END=========================================================
 */

'use strict';

var path = require('path');
var gulp = require('gulp');
var gulpHelpers = require('gulp-helpers');
var taskMaker = gulpHelpers.taskMaker(gulp);
var _ = gulpHelpers.framework('_');
var runSequence = gulpHelpers.framework('run-sequence');
var i18nTask = require('./tools/gulp/tasks/i18n');
var prodTask = require('./tools/gulp/tasks/prod');
var gulpCssUsage = require('gulp-css-usage').default;
var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');

var localDevConfig = {};
try {
	localDevConfig = require('./devConfig');
} catch (e) {
}
var devConfig = Object.assign({}, require('./devConfig.defaults'), localDevConfig);
var webpackConfig = require('./webpack.config');

function defineTasks(mode) {
	let appName = 'onboarding';
	let dist = 'dist/' + mode + '/';

	let path = {
		locales: 'i18n/',
		jssource: 'src/**/*.js',
		jsxsource: 'src/**/*.jsx',
		html: '**/*.html',
		output: dist,
		assets: './resources/**/*.{css,png,svg,eot,ttf,woff,woff2,otf}',
		json: './src/**/*.json',
		index: './src/index.html',
		heat: './src/heat.html',
		watch: ['./src/**'],
		scss: './resources/scss/**/*.scss',
		css: dist + '/css',
		war: [dist + 'index.html', dist + 'punch-outs_en.js', dist + '**/*.{css,png,svg,eot,ttf,woff,woff2,otf}', dist + '**/*(config.json|locale.json)', 'tools/gulp/deployment/**', 'webapp-onboarding/**'],
		heatWar: [dist + 'heat.html', dist + 'heat-validation_en.js', dist + '**/*.{css,png,svg,eot,ttf,woff,woff2,otf}', dist + '**/*(config.json|locale.json)', 'webapp-heat-validation/**'],
		wardest: 'dist/'
	};

	taskMaker.defineTask('clean', {taskName: 'clean', src: path.output});
	taskMaker.defineTask('copy', {taskName: 'copy-assets', src: path.assets, dest: path.output});
	taskMaker.defineTask('copy', {
		taskName: 'copy-json',
		src: path.json,
		dest: path.output,
		changed: {extension: '.json'}
	});
	taskMaker.defineTask('copy', {
		taskName: 'copy-index.html',
		src: path.index,
		dest: path.output,
		rename: 'index.html'
	});
	taskMaker.defineTask('copy', {
		taskName: 'copy-heat.html',
		src: path.heat,
		dest: path.output,
		rename: 'heat.html'
	});
	taskMaker.defineTask('sass', {
		taskName: 'sass',
		src: path.scss,
		dest: path.css,
		config: {outputStyle: 'compressed'}
	});
	taskMaker.defineTask('compress', {
		taskName: 'compress-war',
		src: path.war,
		filename: appName + '.war',
		dest: path.wardest
	});
	taskMaker.defineTask('compress', {
		taskName: 'compress-heat-war',
		src: path.heatWar,
		filename: 'heat-validation.war',
		dest: path.wardest
	});
	taskMaker.defineTask('watch', {
		taskName: 'watch-stuff',
		src: [path.assets, path.json, path.index, path.heat],
		tasks: ['copy-stuff']
	});
	taskMaker.defineTask('watch', {taskName: 'watch-sass', src: path.scss, tasks: ['sass']});

	gulp.task('copy-stuff', callback => {
		return runSequence(['copy-assets', 'copy-json', 'copy-index.html', 'copy-heat.html'], callback);
	});

	gulp.task('i18n', () => {
		return i18nTask({
			outputPath: path.output,
			localesPath: path.locales,
			lang: 'en'
		}).catch(err => {
			console.log('i18n Task : Error! ', err);
			throw err;
		});
	});


	gulp.task('dependencies', () => {
		//TODO:
	});

}

gulp.task('dev', callback => {
	defineTasks('dev');
	return runSequence('clean', ['i18n', 'copy-stuff'], 'webpack-dev-server', ['watch-stuff'], callback);
});

// Production build
gulp.task('build', callback => {
	defineTasks('prod');
	return runSequence('clean', ['copy-stuff', 'i18n'], 'prod', ['compress-war', 'compress-heat-war'], callback);
});

gulp.task('default', ['dev']);

gulp.task('prod', () => {

	// configure webpack for production
	let webpackProductionConfig = Object.create(webpackConfig);

	for (let name in webpackProductionConfig.entry) {
		webpackProductionConfig.entry[name] = webpackProductionConfig.entry[name].filter(path => !path.startsWith('webpack'));
	}

	webpackProductionConfig.cache = true;
	webpackProductionConfig.output = {
		path: path.join(__dirname, 'dist/prod'),
		publicPath: '/onboarding/',
		filename: '[name].js'
	};
	webpackProductionConfig.resolveLoader = {
		root: [path.resolve('.')],
		alias: {
			'config-json-loader': 'tools/webpack/config-json-loader/index.js'
		}
	};

	// remove source maps
	webpackProductionConfig.devtool = undefined;
	webpackProductionConfig.module.preLoaders = webpackProductionConfig.module.preLoaders.filter(preLoader => preLoader.loader != 'source-map-loader');
	webpackProductionConfig.module.loaders.forEach(loader => {
		if (loader.loaders && loader.loaders[0] === 'style') {
			loader.loaders = loader.loaders.map(loaderName => loaderName.replace('?sourceMap', ''));
		}
	});

	webpackProductionConfig.module.loaders.push({test: /config.json$/, loaders: ['config-json-loader']});
	webpackProductionConfig.eslint = {
		configFile: './.eslintrc',
		failOnError: true
	};
	webpackProductionConfig.babel = {//TODO: remove this when UglifyJS will support user or
		// Webpack 2.0
		presets: ['es2015', 'stage-0', 'react']
	}
	webpackProductionConfig.plugins = [
		new webpack.DefinePlugin({
			'process.env': {
				// This has effect on the react lib size
				'NODE_ENV': JSON.stringify('production')
			},
			DEBUG: false,
			DEV: false
		}),
		new webpack.optimize.DedupePlugin(),
		new webpack.optimize.UglifyJsPlugin()
	];

	// run production build
	return prodTask({
		webpackProductionConfig,
		outDir: 'dist/prod'
	})
		.then(() => {
		})
		.catch(err => {
			if (err && err.stack) {
				console.error(err, err.stack);
			}
			throw new Error('Webpack build FAILED');
		});
});

gulp.task('webpack-dev-server', () => {
	// modify some webpack config options for development
	let myConfig = Object.create(webpackConfig);

	myConfig.devServer.setup = server => {
		let fixture = require('./fixture/fixture');
		let proxy = require('http-proxy-middleware');
		let proxyConfigDefaults = {
			changeOrigin: true,
			secure: false,
			onProxyRes: (proxyRes, req, res) => {
				let setCookie = proxyRes.headers['set-cookie'];
				if (setCookie) {
					setCookie[0] = setCookie[0].replace(/\bSecure\b(; )?/, '');
				}
			}
		};

		let middlewares = [
			(req, res, next) => {
				let match = req.url.match(/^(.*)_en.js$/);
				let newUrl = match && match[1] + '.js';
				if (newUrl) {
					console.log(`REWRITING URL: ${req.url} -> ${newUrl}`);
					req.url = newUrl;
				}
				next();
			},
			fixture({
				enabled: devConfig.useFixture
			})
		];

		// standalon back-end (proxyTarget) has higher priority, so it should be first
		if (devConfig.proxyTarget) {
			middlewares.push(
				proxy(['/api', '/onboarding-api', '/sdc1/feProxy/onboarding-api'], Object.assign({}, proxyConfigDefaults, {
					target: devConfig.proxyTarget,
					pathRewrite: {
						'/sdc1/feProxy/onboarding-api': '/onboarding-api'
					}
				}))
			)
		}

		// Ecorp environment (proxyATTTarget) has lower priority, so it should be second
		if (devConfig.proxyATTTarget) {
			middlewares.push(
				proxy(['/sdc1', '/onboarding-api'], Object.assign({}, proxyConfigDefaults, {
					target: devConfig.proxyATTTarget,
					pathRewrite: {
						// Workaround for some weird proxy issue
						'/sdc1/feProxy/onboarding-api': '/sdc1/feProxy/onboarding-api',
						'/onboarding-api': '/sdc1/feProxy/onboarding-api'
					}
				}))
			)
		}
		server.use(middlewares);
	};

	// Start a webpack-dev-server
	let server = new WebpackDevServer(webpack(myConfig), myConfig.devServer);
	server.listen(myConfig.devServer.port, '0.0.0.0', err => {
		if (err) {
			throw new Error('webpack-dev-server' + err);
		}
	});
});


gulp.task('gulp-css-usage', callback => {
	return gulp.src('src/**/*.jsx').pipe(gulpCssUsage({css: 'dist/dev/css/style.css', babylon: ['objectRestSpread']}));
});

gulp.task('css-usage', callback => {
	defineTasks('dev');
	runSequence('sass', 'gulp-css-usage');
});