This commit is contained in:
syuilo 2017-03-23 05:53:09 +09:00
parent 4e387cf7d0
commit abb8e021ba
7 changed files with 112 additions and 77 deletions

View file

@ -2,6 +2,7 @@
* Gulp tasks * Gulp tasks
*/ */
import * as childProcess from 'child_process';
import * as fs from 'fs'; import * as fs from 'fs';
import * as Path from 'path'; import * as Path from 'path';
import * as gulp from 'gulp'; import * as gulp from 'gulp';
@ -10,7 +11,6 @@ import * as ts from 'gulp-typescript';
import tslint from 'gulp-tslint'; import tslint from 'gulp-tslint';
import * as glob from 'glob'; import * as glob from 'glob';
import * as es from 'event-stream'; import * as es from 'event-stream';
import * as webpack from 'webpack-stream';
import cssnano = require('gulp-cssnano'); import cssnano = require('gulp-cssnano');
//import * as uglify from 'gulp-uglify'; //import * as uglify from 'gulp-uglify';
import pug = require('gulp-pug'); import pug = require('gulp-pug');
@ -123,21 +123,25 @@ gulp.task('cleanall', ['clean'], cb =>
gulp.task('default', ['build']); gulp.task('default', ['build']);
gulp.task('build:client', [ gulp.task('build:client', [
'build:ts', 'build:js', 'build:ts',
'build:client:scripts', 'build:js',
'webpack',
'build:client:script',
'build:client:pug', 'build:client:pug',
'copy:client' 'copy:client'
]); ]);
gulp.task('build:client:scripts', () => gulp.task('webpack', done => {
es.merge( const output = childProcess.execSync(Path.join('.', 'node_modules', '.bin', 'webpack') + ' --config webpack.config.ts', );
webpack(require('./webpack.config'), require('webpack')) console.log(output.toString());
.pipe(gulp.dest('./built/web/assets/')) as any, done();
gulp.src('./src/web/app/client/script.js') });
.pipe(replace('VERSION', JSON.stringify(version)))
//.pipe(isProduction ? uglify() : gutil.noop()) gulp.task('build:client:script', () =>
.pipe(gulp.dest('./built/web/assets/client/')) as any gulp.src('./src/web/app/client/script.js')
) .pipe(replace('VERSION', JSON.stringify(version)))
//.pipe(isProduction ? uglify() : gutil.noop())
.pipe(gulp.dest('./built/web/assets/client/')) as any
); );
gulp.task('build:client:styles', () => gulp.task('build:client:styles', () =>
@ -149,7 +153,8 @@ gulp.task('build:client:styles', () =>
); );
gulp.task('copy:client', [ gulp.task('copy:client', [
'build:client:scripts' 'build:client:script',
'webpack'
], () => ], () =>
gulp.src([ gulp.src([
'./assets/**/*', './assets/**/*',
@ -165,7 +170,7 @@ gulp.task('copy:client', [
gulp.task('build:client:pug', [ gulp.task('build:client:pug', [
'copy:client', 'copy:client',
'build:client:scripts', 'build:client:script',
'build:client:styles' 'build:client:styles'
], () => ], () =>
gulp.src('./src/web/app/*/view.pug') gulp.src('./src/web/app/*/view.pug')

3
locales/en.json Normal file
View file

@ -0,0 +1,3 @@
{
"home": "Home"
}

3
locales/ja.json Normal file
View file

@ -0,0 +1,3 @@
{
"home": "ホーム"
}

View file

@ -144,7 +144,6 @@
"uuid": "3.0.1", "uuid": "3.0.1",
"vhost": "3.0.2", "vhost": "3.0.2",
"webpack": "2.3.1", "webpack": "2.3.1",
"webpack-stream": "3.2.0",
"websocket": "1.0.24", "websocket": "1.0.24",
"whatwg-fetch": "2.0.3", "whatwg-fetch": "2.0.3",
"xml2json": "0.11.0" "xml2json": "0.11.0"

View file

@ -4,6 +4,10 @@
(() => { (() => {
const head = document.getElementsByTagName('head')[0]; const head = document.getElementsByTagName('head')[0];
// Detect user language
let lang = (navigator.languages && navigator.languages[0]) || navigator.language;
if (!/en|en\-US|ja/.test(lang)) lang = 'en';
// Detect user agent // Detect user agent
const ua = navigator.userAgent.toLowerCase(); const ua = navigator.userAgent.toLowerCase();
const isMobile = /mobile|iphone|ipad|android/.test(ua); const isMobile = /mobile|iphone|ipad|android/.test(ua);
@ -15,7 +19,7 @@
*/ */
function mountDesktop() { function mountDesktop() {
const script = document.createElement('script'); const script = document.createElement('script');
script.setAttribute('src', `/assets/desktop/script.${VERSION}.js`); script.setAttribute('src', `/assets/desktop/script.${VERSION}.${lang}.js`);
script.setAttribute('async', 'true'); script.setAttribute('async', 'true');
script.setAttribute('defer', 'true'); script.setAttribute('defer', 'true');
head.appendChild(script); head.appendChild(script);
@ -31,7 +35,7 @@
head.appendChild(meta); head.appendChild(meta);
const script = document.createElement('script'); const script = document.createElement('script');
script.setAttribute('src', `/assets/mobile/script.${VERSION}.js`); script.setAttribute('src', `/assets/mobile/script.${VERSION}.${lang}.js`);
script.setAttribute('async', 'true'); script.setAttribute('async', 'true');
script.setAttribute('defer', 'true'); script.setAttribute('defer', 'true');
head.appendChild(script); head.appendChild(script);

View file

@ -3,7 +3,7 @@
<li class="home { active: page == 'home' }"> <li class="home { active: page == 'home' }">
<a href={ CONFIG.url }> <a href={ CONFIG.url }>
<i class="fa fa-home"></i> <i class="fa fa-home"></i>
<p>ホーム</p> <p>'i18n:home'</p>
</a> </a>
</li> </li>
<li class="messaging"> <li class="messaging">

View file

@ -4,73 +4,94 @@
import * as webpack from 'webpack'; import * as webpack from 'webpack';
const StringReplacePlugin = require('string-replace-webpack-plugin'); const StringReplacePlugin = require('string-replace-webpack-plugin');
import version from './src/version'; import version from './src/version';
const constants = require('./src/const.json'); const constants = require('./src/const.json');
const languages = {
'en': require('./locales/en.json'),
'en-US': require('./locales/en.json'),
'ja': require('./locales/ja.json')
};
const env = process.env.NODE_ENV; const env = process.env.NODE_ENV;
const isProduction = env === 'production'; const isProduction = env === 'production';
const pack: webpack.Configuration = { module.exports = (Object as any).entries(languages).map(([lang, locale]) => {
entry: { const pack /*: webpack.Configuration ← fuck wrong type definition!!! */ = {
'desktop': './src/web/app/desktop/script.js', name: lang,
'mobile': './src/web/app/mobile/script.js', entry: {
'dev': './src/web/app/dev/script.js', 'desktop': './src/web/app/desktop/script.js',
'auth': './src/web/app/auth/script.js' 'mobile': './src/web/app/mobile/script.js',
}, 'dev': './src/web/app/dev/script.js',
module: { 'auth': './src/web/app/auth/script.js'
rules: [ },
{ module: {
enforce: 'pre', rules: [
test: /\.tag$/, {
exclude: /node_modules/, enforce: 'pre',
loader: StringReplacePlugin.replace({ test: /\.*$/,
replacements: [ exclude: /node_modules/,
{ pattern: /\$theme\-color\-foreground/g, replacement: () => constants.themeColorForeground }, loader: StringReplacePlugin.replace({
{ pattern: /\$theme\-color/g, replacement: () => constants.themeColor }, replacements: [
] { pattern: /'i18n:(.+?)'/g, replacement: (_, text) => locale[text] }
}) ]
}, })
{ },
test: /\.tag$/, {
exclude: /node_modules/, enforce: 'pre',
loader: 'riot-tag-loader', test: /\.tag$/,
query: { exclude: /node_modules/,
hot: false, loader: StringReplacePlugin.replace({
style: 'stylus', replacements: [
expr: false, { pattern: /\$theme\-color\-foreground/g, replacement: () => constants.themeColorForeground },
compact: true, { pattern: /\$theme\-color/g, replacement: () => constants.themeColor },
parserOptions: { ]
style: { })
compress: true },
{
test: /\.tag$/,
exclude: /node_modules/,
loader: 'riot-tag-loader',
query: {
hot: false,
style: 'stylus',
expr: false,
compact: true,
parserOptions: {
style: {
compress: true
}
} }
} }
},
{
test: /\.styl$/,
exclude: /node_modules/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' },
{ loader: 'stylus-loader' }
]
} }
}, ]
{ },
test: /\.styl$/, plugins: [
exclude: /node_modules/, new webpack.DefinePlugin({
use: [ VERSION: JSON.stringify(version),
{ loader: 'style-loader' }, THEME_COLOR: JSON.stringify(constants.themeColor)
{ loader: 'css-loader' }, }),
{ loader: 'stylus-loader' } new StringReplacePlugin()
] ],
} output: {
] path: __dirname + '/built/web/assets',
}, filename: `[name]/script.${version}.${lang}.js`
plugins: [ }
new webpack.DefinePlugin({ };
VERSION: JSON.stringify(version),
THEME_COLOR: JSON.stringify(constants.themeColor) if (isProduction) {
}), //pack.plugins.push(new webpack.optimize.UglifyJsPlugin());
new StringReplacePlugin()
],
output: {
filename: `[name]/script.${version}.js`
} }
};
if (isProduction) { return pack;
//pack.plugins.push(new webpack.optimize.UglifyJsPlugin()); });
}
module.exports = pack;