build-scripts/gulpfile-embedded.js

   1 'use strict';
   2
   3 const Promise = require('bluebird');
   4 const path = require('path');
   5 const gulp = require('gulp');
   6
   7 const postcss = require('gulp-postcss');
   8 const autoprefixer = require('autoprefixer-core');
   9 const mqpacker = require('css-mqpacker');
  10 const csswring = require('csswring');
  11 const styleBuilder = require('./style-builder');
  12 const getSourceMapOptions = require('./get-sourcemap-options');
  13 const uglify = require('gulp-uglify');
  14 const childProcessPromise = require('./child-process-promise');
  15 const extractUrls = require('./extract-urls');
  16 const bootScriptUtils = require('gitter-web-templates/lib/boot-script-utils');
  17
  18 // We need access to the `clientapp:compile:webpack` task
  19 require('./gulpfile-clientapp');
  20
  21 var opts = require('yargs')
  22   .option('android', {
  23     type: 'boolean',
  24     default: false,
  25     description: 'Output'
  26   })
  27   .option('ios', {
  28     type: 'boolean',
  29     default: false,
  30     description: 'Output'
  31   })
  32   .help('help')
  33   .alias('help', 'h').argv;
  34
  35 let buildPath;
  36 if (opts.android) {
  37   buildPath = 'output/android/www/';
  38 } else if (opts.ios) {
  39   buildPath = 'output/ios/www/';
  40 } else {
  41   throw new Error('Please define the --android of --ios args when running the embedded build');
  42 }
  43
  44 /**
  45  * Hook into the compile stage
  46  */
  47 gulp.task('embedded:compile', [
  48   'embedded:compile:copy-files',
  49   'embedded:compile:markup',
  50   'embedded:compile:css',
  51   'embedded:compile:copy-webpack-builds'
  52 ]);
  53
  54 // We also copy files after the CSS is compiled in `embedded:post-compile:copy-linked-assets`
  55 gulp.task('embedded:compile:copy-files', function() {
  56   return gulp
  57     .src(
  58       [
  59         'public/images/emoji/*',
  60         // these icons are for thread message indicator
  61         // inline-threads-for-mobile-embedded
  62         'public/images/svg/corner-up-left.svg',
  63         'public/images/svg/corner-down-right.svg',
  64
  65         'public/repo/katex/**'
  66       ],
  67       {
  68         base: './public',
  69         stat: true
  70       }
  71     )
  72     .pipe(gulp.dest(buildPath));
  73 });
  74
  75 gulp.task('embedded:compile:markup', ['clientapp:compile:webpack'], function() {
  76   const args = [
  77     path.join(__dirname, './render-embedded-chat.js'),
  78     '--output',
  79     path.join(buildPath, 'mobile/embedded-chat.html')
  80   ];
  81   if (opts.android) {
  82     args.push('--android');
  83   }
  84   if (opts.ios) {
  85     args.push('--ios');
  86   }
  87
  88   return childProcessPromise.spawn(
  89     'node',
  90     args,
  91     Object.assign({}, process.env, {
  92       // Default to prod config
  93       NODE_ENV: process.env.NODE_ENV || 'prod'
  94     })
  95   );
  96 });
  97
  98 const cssIosStyleBuilder = styleBuilder(['public/less/mobile-native-chat.less'], {
  99   dest: path.join(buildPath, 'styles'),
 100   watchGlob: 'public/**/*.less',
 101   sourceMapOptions: getSourceMapOptions(),
 102   lessOptions: {
 103     paths: ['public/less'],
 104     globalVars: {
 105       'target-env': '"mobile"'
 106     }
 107   },
 108   streamTransform: function(stream) {
 109     return stream.pipe(
 110       postcss([
 111         autoprefixer({
 112           browsers: ['ios_saf >= 6'],
 113           cascade: false
 114         }),
 115         mqpacker,
 116         csswring
 117       ])
 118     );
 119   }
 120 });
 121
 122 gulp.task('embedded:compile:css', function() {
 123   return cssIosStyleBuilder.build();
 124 });
 125
 126 /* Generate embedded native */
 127 gulp.task('embedded:compile:copy-webpack-builds', ['clientapp:compile:webpack'], function() {
 128   const assets = bootScriptUtils.generateAssetsForChunks(['mobile-native-embedded-chat']);
 129
 130   return gulp
 131     .src(assets.map(asset => path.join('output/assets/js/', asset)), {
 132       base: './output/assets/js/',
 133       stat: true
 134     })
 135     .pipe(gulp.dest(path.join(buildPath, 'js')));
 136 });
 137
 138 gulp.task('embedded:post-compile', [
 139   'embedded:post-compile:uglify',
 140   'embedded:post-compile:copy-linked-assets'
 141 ]);
 142
 143 gulp.task('embedded:post-compile:uglify', function() {
 144   return gulp
 145     .src(path.join(buildPath, 'js/*.js'))
 146     .pipe(uglify())
 147     .pipe(gulp.dest(path.join(buildPath, 'js')));
 148 });
 149
 150 gulp.task('embedded:post-compile:copy-linked-assets', function() {
 151   return Promise.all([
 152     extractUrls(path.join(buildPath, 'styles/mobile-native-chat.css'), buildPath)
 153   ]).then(resourceLists => {
 154     const resourceList = resourceLists.reduce((list, resultantList) => {
 155       return resultantList.concat(list);
 156     }, []);
 157
 158     return gulp
 159       .src(resourceList, {
 160         base: './public',
 161         stat: true
 162       })
 163       .pipe(gulp.dest(buildPath));
 164   });
 165 });