openecomp-ui/gulpfile.js

   1 /*-
   2  * ============LICENSE_START=======================================================
   3  * SDC
   4  * ================================================================================
   5  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
   6  * ================================================================================
   7  * Licensed under the Apache License, Version 2.0 (the "License");
   8  * you may not use this file except in compliance with the License.
   9  * You may obtain a copy of the License at
  10  *
  11  *      http://www.apache.org/licenses/LICENSE-2.0
  12  *
  13  * Unless required by applicable law or agreed to in writing, software
  14  * distributed under the License is distributed on an "AS IS" BASIS,
  15  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  16  * See the License for the specific language governing permissions and
  17  * limitations under the License.
  18  * ============LICENSE_END=========================================================
  19  */
  20
  21 'use strict';
  22
  23 var path = require('path');
  24 var gulp = require('gulp');
  25 var gulpHelpers = require('gulp-helpers');
  26 var taskMaker = gulpHelpers.taskMaker(gulp);
  27 var _ = gulpHelpers.framework('_');
  28 var runSequence = gulpHelpers.framework('run-sequence');
  29 var i18nTask = require('./tools/gulp/tasks/i18n');
  30 var prodTask = require('./tools/gulp/tasks/prod');
  31 var gulpCssUsage = require('gulp-css-usage').default;
  32 var webpack = require('webpack');
  33 var WebpackDevServer = require('webpack-dev-server');
  34
  35 var localDevConfig = {};
  36 try {
  37         localDevConfig = require('./devConfig');
  38 } catch (e) {
  39 }
  40 var devConfig = Object.assign({}, require('./devConfig.defaults'), localDevConfig);
  41 var webpackConfig = require('./webpack.config');
  42
  43 function defineTasks(mode) {
  44         let appName = 'onboarding';
  45         let dist = 'dist/' + mode + '/';
  46
  47         let path = {
  48                 locales: 'i18n/',
  49                 jssource: 'src/**/*.js',
  50                 jsxsource: 'src/**/*.jsx',
  51                 html: '**/*.html',
  52                 output: dist,
  53                 assets: './resources/**/*.{css,png,svg,eot,ttf,woff,woff2,otf}',
  54                 json: './src/**/*.json',
  55                 index: './src/index.html',
  56                 heat: './src/heat.html',
  57                 watch: ['./src/**'],
  58                 scss: './resources/scss/**/*.scss',
  59                 css: dist + '/css',
  60                 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/**'],
  61                 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/**'],
  62                 wardest: 'dist/'
  63         };
  64
  65         taskMaker.defineTask('clean', {taskName: 'clean', src: path.output});
  66         taskMaker.defineTask('copy', {taskName: 'copy-assets', src: path.assets, dest: path.output});
  67         taskMaker.defineTask('copy', {
  68                 taskName: 'copy-json',
  69                 src: path.json,
  70                 dest: path.output,
  71                 changed: {extension: '.json'}
  72         });
  73         taskMaker.defineTask('copy', {
  74                 taskName: 'copy-index.html',
  75                 src: path.index,
  76                 dest: path.output,
  77                 rename: 'index.html'
  78         });
  79         taskMaker.defineTask('copy', {
  80                 taskName: 'copy-heat.html',
  81                 src: path.heat,
  82                 dest: path.output,
  83                 rename: 'heat.html'
  84         });
  85         taskMaker.defineTask('sass', {
  86                 taskName: 'sass',
  87                 src: path.scss,
  88                 dest: path.css,
  89                 config: {outputStyle: 'compressed'}
  90         });
  91         taskMaker.defineTask('compress', {
  92                 taskName: 'compress-war',
  93                 src: path.war,
  94                 filename: appName + '.war',
  95                 dest: path.wardest
  96         });
  97         taskMaker.defineTask('compress', {
  98                 taskName: 'compress-heat-war',
  99                 src: path.heatWar,
 100                 filename: 'heat-validation.war',
 101                 dest: path.wardest
 102         });
 103         taskMaker.defineTask('watch', {
 104                 taskName: 'watch-stuff',
 105                 src: [path.assets, path.json, path.index, path.heat],
 106                 tasks: ['copy-stuff']
 107         });
 108         taskMaker.defineTask('watch', {taskName: 'watch-sass', src: path.scss, tasks: ['sass']});
 109
 110         gulp.task('copy-stuff', callback => {
 111                 return runSequence(['copy-assets', 'copy-json', 'copy-index.html', 'copy-heat.html'], callback);
 112         });
 113
 114         gulp.task('i18n', () => {
 115                 return i18nTask({
 116                         outputPath: path.output,
 117                         localesPath: path.locales,
 118                         lang: 'en'
 119                 }).catch(err => {
 120                         console.log('i18n Task : Error! ', err);
 121                         throw err;
 122                 });
 123         });
 124
 125
 126         gulp.task('dependencies', () => {
 127                 //TODO:
 128         });
 129
 130 }
 131
 132 gulp.task('dev', callback => {
 133         defineTasks('dev');
 134         return runSequence('clean', ['i18n', 'copy-stuff'], 'webpack-dev-server', ['watch-stuff'], callback);
 135 });
 136
 137 // Production build
 138 gulp.task('build', callback => {
 139         defineTasks('prod');
 140         return runSequence('clean', ['copy-stuff', 'i18n'], 'prod', ['compress-war', 'compress-heat-war'], callback);
 141 });
 142
 143 gulp.task('default', ['dev']);
 144
 145 gulp.task('prod', () => {
 146
 147         // configure webpack for production
 148         let webpackProductionConfig = Object.create(webpackConfig);
 149
 150         for (let name in webpackProductionConfig.entry) {
 151                 webpackProductionConfig.entry[name] = webpackProductionConfig.entry[name].filter(path => !path.startsWith('webpack'));
 152         }
 153
 154         webpackProductionConfig.cache = true;
 155         webpackProductionConfig.output = {
 156                 path: path.join(__dirname, 'dist/prod'),
 157                 publicPath: '/onboarding/',
 158                 filename: '[name].js'
 159         };
 160         webpackProductionConfig.resolveLoader = {
 161                 root: [path.resolve('.')],
 162                 alias: {
 163                         'config-json-loader': 'tools/webpack/config-json-loader/index.js'
 164                 }
 165         };
 166
 167         // remove source maps
 168         webpackProductionConfig.devtool = undefined;
 169         webpackProductionConfig.module.preLoaders = webpackProductionConfig.module.preLoaders.filter(preLoader => preLoader.loader != 'source-map-loader');
 170         webpackProductionConfig.module.loaders.forEach(loader => {
 171                 if (loader.loaders && loader.loaders[0] === 'style') {
 172                         loader.loaders = loader.loaders.map(loaderName => loaderName.replace('?sourceMap', ''));
 173                 }
 174         });
 175
 176         webpackProductionConfig.module.loaders.push({test: /config.json$/, loaders: ['config-json-loader']});
 177         webpackProductionConfig.eslint = {
 178                 configFile: './.eslintrc',
 179                 failOnError: true
 180         };
 181         webpackProductionConfig.babel = {//TODO: remove this when UglifyJS will support user or
 182                 // Webpack 2.0
 183                 presets: ['es2015', 'stage-0', 'react']
 184         }
 185         webpackProductionConfig.plugins = [
 186                 new webpack.DefinePlugin({
 187                         'process.env': {
 188                                 // This has effect on the react lib size
 189                                 'NODE_ENV': JSON.stringify('production')
 190                         },
 191                         DEBUG: false,
 192                         DEV: false
 193                 }),
 194                 new webpack.optimize.DedupePlugin(),
 195                 new webpack.optimize.UglifyJsPlugin()
 196         ];
 197
 198         // run production build
 199         return prodTask({
 200                 webpackProductionConfig,
 201                 outDir: 'dist/prod'
 202         })
 203                 .then(() => {
 204                 })
 205                 .catch(err => {
 206                         if (err && err.stack) {
 207                                 console.error(err, err.stack);
 208                         }
 209                         throw new Error('Webpack build FAILED');
 210                 });
 211 });
 212
 213 gulp.task('webpack-dev-server', () => {
 214         // modify some webpack config options for development
 215         let myConfig = Object.create(webpackConfig);
 216
 217         myConfig.devServer.setup = server => {
 218                 let fixture = require('./fixture/fixture');
 219                 let proxy = require('http-proxy-middleware');
 220                 let proxyConfigDefaults = {
 221                         changeOrigin: true,
 222                         secure: false,
 223                         onProxyRes: (proxyRes, req, res) => {
 224                                 let setCookie = proxyRes.headers['set-cookie'];
 225                                 if (setCookie) {
 226                                         setCookie[0] = setCookie[0].replace(/\bSecure\b(; )?/, '');
 227                                 }
 228                         }
 229                 };
 230
 231                 let middlewares = [
 232                         (req, res, next) => {
 233                                 let match = req.url.match(/^(.*)_en.js$/);
 234                                 let newUrl = match && match[1] + '.js';
 235                                 if (newUrl) {
 236                                         console.log(`REWRITING URL: ${req.url} -> ${newUrl}`);
 237                                         req.url = newUrl;
 238                                 }
 239                                 next();
 240                         },
 241                         fixture({
 242                                 enabled: devConfig.useFixture
 243                         })
 244                 ];
 245
 246                 // standalon back-end (proxyTarget) has higher priority, so it should be first
 247                 if (devConfig.proxyTarget) {
 248                         middlewares.push(
 249                                 proxy(['/api', '/onboarding-api', '/sdc1/feProxy/onboarding-api'], Object.assign({}, proxyConfigDefaults, {
 250                                         target: devConfig.proxyTarget,
 251                                         pathRewrite: {
 252                                                 '/sdc1/feProxy/onboarding-api': '/onboarding-api'
 253                                         }
 254                                 }))
 255                         )
 256                 }
 257
 258                 // Ecorp environment (proxyATTTarget) has lower priority, so it should be second
 259                 if (devConfig.proxyATTTarget) {
 260                         middlewares.push(
 261                                 proxy(['/sdc1', '/onboarding-api'], Object.assign({}, proxyConfigDefaults, {
 262                                         target: devConfig.proxyATTTarget,
 263                                         pathRewrite: {
 264                                                 // Workaround for some weird proxy issue
 265                                                 '/sdc1/feProxy/onboarding-api': '/sdc1/feProxy/onboarding-api',
 266                                                 '/onboarding-api': '/sdc1/feProxy/onboarding-api'
 267                                         }
 268                                 }))
 269                         )
 270                 }
 271                 server.use(middlewares);
 272         };
 273
 274         // Start a webpack-dev-server
 275         let server = new WebpackDevServer(webpack(myConfig), myConfig.devServer);
 276         server.listen(myConfig.devServer.port, '0.0.0.0', err => {
 277                 if (err) {
 278                         throw new Error('webpack-dev-server' + err);
 279                 }
 280         });
 281 });
 282
 283
 284 gulp.task('gulp-css-usage', callback => {
 285         return gulp.src('src/**/*.jsx').pipe(gulpCssUsage({css: 'dist/dev/css/style.css', babylon: ['objectRestSpread']}));
 286 });
 287
 288 gulp.task('css-usage', callback => {
 289         defineTasks('dev');
 290         runSequence('sass', 'gulp-css-usage');
 291 });
 292