Commit 84e72bd0 authored by Eric Eastwood's avatar Eric Eastwood

Move Android embedded chat build to cross-platfrom Gulp scripts

Part of open sourcing Android, gitlab-org/gitter/gitter-android-app#8
parent bff60366
# 19.15.0 - *upcoming*
- ...
Developer facing:
- Move Android embedded chat build to cross-platform Gulp scripts, https://gitlab.com/gitlab-org/gitter/webapp/merge_requests/1218
# 19.14.0 - 2018-8-1
- Remove missing 404 rooms from the homepage, https://gitlab.com/gitlab-org/gitter/webapp/merge_requests/1215
......
EMBEDDED_NODE_ENV ?= prod
EMBEDDED_WWW_DIRECTORY ?= ~/code/gitter/ios/Troupe/www/build
export PATH := ./node_modules/.bin:$(PATH)
.PHONY: build clean test npm sprites npm-quick npm-full performance-tests test-no-coverage continuous-integration validate
......@@ -72,26 +70,6 @@ upgrade-data:
maintain-data:
MODIFY=true ./scripts/datamaintenance/execute.sh || true
clean-embedded-chat:
rm -rf output/embedded output/embedded.tgz
embedded-chat: clean
mkdir -p output/embedded/www/mobile
NODE_ENV=$(EMBEDDED_NODE_ENV) ./build-scripts/render-embedded-chat.js -o output/embedded/www/mobile/embedded-chat.html
gulp --gulpfile gulpfile-embedded.js
ls output/assets/js/*.js >> output/embedded-resources.txt
ls output/assets/styles/*.css >> output/embedded-resources.txt
ls output/assets/images/emoji/* >> output/embedded-resources.txt
./build-scripts/extract-urls.js output/assets/styles/mobile-native-chat.css >> output/embedded-resources.txt
./build-scripts/copy-embedded-resources.sh
embedded-chat-copy: embedded-chat
rm -rf $(EMBEDDED_WWW_DIRECTORY)
mkdir -p $(EMBEDDED_WWW_DIRECTORY)
cp -R output/embedded/www/* $(EMBEDDED_WWW_DIRECTORY)/
# make-jquery:
# npm install
# ./node_modules/.bin/jquery-builder -v 2.0.3 -e deprecated -m > public/repo/jquery/jquery.js
#!/bin/bash
while read i; do
dirname output/embedded/www/${i#output/assets/};
done < "output/embedded-resources.txt" | uniq | while read i; do
mkdir -p $i
done
for i in `cat output/embedded-resources.txt`; do
cp $i output/embedded/www/${i#output/assets/};
done
#!/usr/bin/env node
"use strict";
var postcss = require('postcss');
......@@ -6,90 +5,82 @@ var fs = require('fs');
var path = require('path');
var reduceFunctionCall = require('reduce-function-call');
var url = require('url');
var shimPositionOption = require('../scripts/yargs-shim-position-option');
var opts = require('yargs')
.option('input', shimPositionOption({
position: 0,
required: true,
description: 'Output'
}))
.help('help')
.alias('help', 'h')
.argv;
function extractUrls(input, basePath) {
var resources = {};
var resources = {};
function getFileName(value) {
var u = url.parse(value);
if(u.protocol || u.hostname) return value;
function getFileName(value) {
var u = url.parse(value);
if(u.protocol || u.hostname) return value;
value = u.pathname;
value = u.pathname;
if(value.indexOf('.') === 0) {
var inputRelativeDir = path.dirname(path.relative(basePath, input));
var relativeToPublicFilePath = path.join(inputRelativeDir, value);
return path.join('public', relativeToPublicFilePath);
}
if(value.indexOf('.') === 0) {
var abs = path.resolve(path.dirname(opts.input), value);
return path.relative(process.cwd(), abs);
return value;
}
return value;
}
var css = postcss.parse(fs.readFileSync(opts.input));
var css = postcss.parse(fs.readFileSync(input));
css.eachDecl(function(decl) {
if (!decl.value) return;
css.eachDecl(function(decl) {
if (!decl.value) return;
if(decl.prop !== 'src' || decl.parent.name !== 'font-face') return;
if(decl.prop !== 'src' || decl.parent.name !== 'font-face') return;
if (!decl.parent.decls) return;
if (!decl.parent.decls) return;
var d = decl.parent.decls.filter(function(d) {
return d.prop === 'src' && d.parent.name === 'font-face';
});
var d = decl.parent.decls.filter(function(d) {
return d.prop === 'src' && d.parent.name === 'font-face';
});
if(!d.length) return;
if(!d.length) return;
// var hasTtf = d.filter(function(x) {
// return x.value.indexOf('.ttf') >= 0;
// });
// var hasTtf = d.filter(function(x) {
// return x.value.indexOf('.ttf') >= 0;
// });
// if(hasTtf.length) {
// decl.parent.decls = hasTtf;
// }
// if(hasTtf.length) {
// decl.parent.decls = hasTtf;
// }
});
});
css.eachDecl(function(decl) {
if (!decl.value) return;
css.eachDecl(function(decl) {
if (!decl.value) return;
var urls = [];
var urls = [];
reduceFunctionCall(decl.value, "url", function(value) {
var m = /^['"]([^'"]*)['"]$/.exec(value);
if(m) value = m[1];
reduceFunctionCall(decl.value, "url", function(value) {
var m = /^['"]([^'"]*)['"]$/.exec(value);
if(m) value = m[1];
value = getFileName(value);
value = getFileName(value);
urls.push(value);
});
if(decl.prop === 'src' && decl.parent.name === 'font-face') {
// If there are multiple fonts, choose the ttf
var ttfs = urls.filter(function(v) {
return (/\.ttf/).test(v);
urls.push(value);
});
if(ttfs.length > 0) {
urls = ttfs;
if(decl.prop === 'src' && decl.parent.name === 'font-face') {
// If there are multiple fonts, choose the ttf
var ttfs = urls.filter(function(v) {
return (/\.ttf/).test(v);
});
if(ttfs.length > 0) {
urls = ttfs;
}
}
}
urls.forEach(function(value) {
resources[value] = true;
urls.forEach(function(value) {
resources[value] = true;
});
});
});
return Object.keys(resources);
}
Object.keys(resources).forEach(function(key) {
console.log(key);
});
module.exports = extractUrls;
'use strict';
var gulp = require('gulp');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer-core');
var mqpacker = require('css-mqpacker');
var csswring = require('csswring');
var styleBuilder = require('./style-builder');
var getSourceMapOptions = require('./get-sourcemap-options');
var webpack = require('webpack-stream');
var uglify = require('gulp-uglify');
const Promise = require('bluebird');
const path = require('path');
const gulp = require('gulp');
const glob = Promise.promisify(require('glob'));
var cssDestDir = 'output/assets/styles';
var cssWatchGlob = 'public/**/*.less';
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer-core');
const mqpacker = require('css-mqpacker');
const csswring = require('csswring');
const styleBuilder = require('./style-builder');
const getSourceMapOptions = require('./get-sourcemap-options');
const webpack = require('webpack-stream');
const uglify = require('gulp-uglify');
const childProcessPromise = require('./child-process-promise');
const extractUrls = require('./extract-urls');
const cssDestDir = 'output/embedded/www/styles';
const cssWatchGlob = 'public/**/*.less';
/**
* Hook into the compile stage
*/
gulp.task('embedded:compile', ['clientapp:compile:copy-files', 'embedded:compile:css', 'embedded:compile:webpack']);
gulp.task('embedded:compile', [
'clientapp:compile:copy-files',
'embedded:compile:markup',
'embedded:compile:css',
'embedded:compile:webpack'
]);
// We also copy files after the CSS is compiled in `embedded:post-compile:copy-linked-assets`
gulp.task('clientapp:compile:copy-files', function() {
return gulp.src([
'public/images/emoji/*',
// 'public/sprites/**',
'public/repo/katex/**',
], {
base: './public',
stat: true
})
.pipe(gulp.dest('output/embedded/www'));
});
var cssIosStyleBuilder = styleBuilder([
gulp.task('embedded:compile:markup', function() {
return childProcessPromise.spawn('node', [
path.join(__dirname, './render-embedded-chat.js'),
'--output', 'output/embedded/www/mobile/embedded-chat.html',
], process.env);
});
const cssIosStyleBuilder = styleBuilder([
'public/less/mobile-native-chat.less'
], {
dest: cssDestDir,
......@@ -47,31 +78,37 @@ gulp.task('embedded:compile:css', function() {
return cssIosStyleBuilder.build();
});
/* Generate embedded native */
gulp.task('embedded:compile:webpack', ['clientapp:compile:copy-files'], function() {
return gulp.src('./public/js/webpack-mobile-native.config')
.pipe(webpack(require('../public/js/webpack-mobile-native.config')))
.pipe(gulp.dest('output/assets/js'));
.pipe(gulp.dest('output/embedded/www/js'));
});
gulp.task('embedded:post-compile', ['embedded:post-compile:uglify']);
gulp.task('embedded:post-compile', [
'embedded:post-compile:uglify',
'embedded:post-compile:copy-linked-assets'
]);
gulp.task('embedded:post-compile:uglify', function() {
return gulp.src('output/assets/js/*.js')
return gulp.src('output/embedded/www/js/*.js')
.pipe(uglify())
.pipe(gulp.dest('output/assets/js'));
.pipe(gulp.dest('output/embedded/www/js'));
});
gulp.task('clientapp:compile:copy-files', function() {
return gulp.src([
'public/fonts/**',
'public/images/**',
// 'public/sprites/**',
'public/repo/katex/**',
], {
base: "./public",
stat: true
gulp.task('embedded:post-compile:copy-linked-assets', function() {
return Promise.all([
extractUrls('output/embedded/www/styles/mobile-native-chat.css', 'output/embedded/www/'),
])
.then((resourceLists) => {
const resourceList = resourceLists.reduce((list, resultantList) => {
return resultantList.concat(list);
}, []);
return gulp.src(resourceList, {
base: './public',
stat: true
})
.pipe(gulp.dest('output/embedded/www'));
})
.pipe(gulp.dest('output/assets'));
});
#!/usr/bin/env node
"use strict";
var express = require('express');
var fs = require('fs');
var expressHbs = require('express-hbs');
var resolveStatic = require('../server/web/resolve-static');
const Promise = require('bluebird');
const express = require('express');
const fs = require('fs-extra');
const outputFile = Promise.promisify(fs.outputFile);
const expressHbs = require('express-hbs');
const resolveStatic = require('../server/web/resolve-static');
require('../server/web/register-helpers')(expressHbs);
const shutdown = require('shutdown');
var opts = require('yargs')
.option('output', {
......@@ -21,8 +25,7 @@ function die(err) {
process.exit(1);
}
var app = express();
require('../server/web/register-helpers')(expressHbs);
const app = express();
app.engine('hbs', expressHbs.express3({
partialsDir: resolveStatic('/templates/partials'),
......@@ -37,8 +40,13 @@ app.set('view engine', 'hbs');
app.set('views', resolveStatic('/templates'));
app.render('mobile/native-embedded-chat-app', {}, function(err, html) {
if(err) return die(err);
fs.writeFileSync(opts.output, html, { encoding: 'utf8' });
process.exit(0);
if(err) {
die(err);
}
outputFile(opts.output, html, { encoding: 'utf8' })
.catch(die)
.then(() => {
shutdown.shutdownGracefully();
});
});
......@@ -2,9 +2,10 @@
var fs = require('fs');
var path = require('path');
var shutdown = require('shutdown');
function hotswapReloader(baseDir, callback) {
fs.watch(baseDir, { persistent: true }, function (event, filename) {
const watcher = fs.watch(baseDir, { persistent: true }, function (event, filename) {
if (event === 'change' && filename) {
var location = path.resolve(baseDir, filename);
......@@ -19,6 +20,11 @@ function hotswapReloader(baseDir, callback) {
callback(filename, location);
}
});
shutdown.addHandler('bayeux', 5, (doneShuttingDown) => {
watcher.close();
doneShuttingDown();
});
}
module.exports = hotswapReloader;
......@@ -326,6 +326,7 @@
"precommit-checks": "eslint --cache --quiet --format unix --ext .js --ext .jsx . && gulp linter:validate:config test:test --test-fast --test-critical-only",
"task-validate": "gulp validate",
"task-watch": "gulp watch",
"build-android-assets": "gulp --gulpfile gulpfile-embedded.js",
"browser-build-tests": "webpack --config ./test/in-browser/webpack.config.js",
"browser-run-test": "cd ./test/in-browser/fixtures && devtool -cq runner.js",
"browser-test": "npm run browser-build-tests && npm run browser-run-test",
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment