From 560fd96ea30024366b51f231560f7ae5447c3694 Mon Sep 17 00:00:00 2001 From: syuilo Date: Thu, 23 Mar 2017 05:53:09 +0900 Subject: [PATCH] wip #313 --- gulpfile.ts | 33 ++--- locales/en.json | 3 + locales/ja.json | 3 + package.json | 1 - src/web/app/client/script.js | 8 +- src/web/app/desktop/tags/ui-header-nav.tag | 2 +- webpack.config.ts | 139 ++++++++++++--------- 7 files changed, 112 insertions(+), 77 deletions(-) create mode 100644 locales/en.json create mode 100644 locales/ja.json diff --git a/gulpfile.ts b/gulpfile.ts index 06eaafc96..ff178582b 100644 --- a/gulpfile.ts +++ b/gulpfile.ts @@ -2,6 +2,7 @@ * Gulp tasks */ +import * as childProcess from 'child_process'; import * as fs from 'fs'; import * as Path from 'path'; import * as gulp from 'gulp'; @@ -10,7 +11,6 @@ import * as ts from 'gulp-typescript'; import tslint from 'gulp-tslint'; import * as glob from 'glob'; import * as es from 'event-stream'; -import * as webpack from 'webpack-stream'; import cssnano = require('gulp-cssnano'); //import * as uglify from 'gulp-uglify'; import pug = require('gulp-pug'); @@ -123,21 +123,25 @@ gulp.task('cleanall', ['clean'], cb => gulp.task('default', ['build']); gulp.task('build:client', [ - 'build:ts', 'build:js', - 'build:client:scripts', + 'build:ts', + 'build:js', + 'webpack', + 'build:client:script', 'build:client:pug', 'copy:client' ]); -gulp.task('build:client:scripts', () => - es.merge( - webpack(require('./webpack.config'), require('webpack')) - .pipe(gulp.dest('./built/web/assets/')) 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('webpack', done => { + const output = childProcess.execSync(Path.join('.', 'node_modules', '.bin', 'webpack') + ' --config webpack.config.ts', ); + console.log(output.toString()); + done(); +}); + +gulp.task('build:client:script', () => + 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', () => @@ -149,7 +153,8 @@ gulp.task('build:client:styles', () => ); gulp.task('copy:client', [ - 'build:client:scripts' + 'build:client:script', + 'webpack' ], () => gulp.src([ './assets/**/*', @@ -165,7 +170,7 @@ gulp.task('copy:client', [ gulp.task('build:client:pug', [ 'copy:client', - 'build:client:scripts', + 'build:client:script', 'build:client:styles' ], () => gulp.src('./src/web/app/*/view.pug') diff --git a/locales/en.json b/locales/en.json new file mode 100644 index 000000000..ea6ae5b7d --- /dev/null +++ b/locales/en.json @@ -0,0 +1,3 @@ +{ + "home": "Home" +} diff --git a/locales/ja.json b/locales/ja.json new file mode 100644 index 000000000..7a7f3a2d0 --- /dev/null +++ b/locales/ja.json @@ -0,0 +1,3 @@ +{ + "home": "ホーム" +} diff --git a/package.json b/package.json index 631bb84d2..e77c1dbba 100644 --- a/package.json +++ b/package.json @@ -144,7 +144,6 @@ "uuid": "3.0.1", "vhost": "3.0.2", "webpack": "2.3.1", - "webpack-stream": "3.2.0", "websocket": "1.0.24", "whatwg-fetch": "2.0.3", "xml2json": "0.11.0" diff --git a/src/web/app/client/script.js b/src/web/app/client/script.js index 0f0fd7aa4..876d2c169 100644 --- a/src/web/app/client/script.js +++ b/src/web/app/client/script.js @@ -4,6 +4,10 @@ (() => { 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 const ua = navigator.userAgent.toLowerCase(); const isMobile = /mobile|iphone|ipad|android/.test(ua); @@ -15,7 +19,7 @@ */ function mountDesktop() { 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('defer', 'true'); head.appendChild(script); @@ -31,7 +35,7 @@ head.appendChild(meta); 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('defer', 'true'); head.appendChild(script); diff --git a/src/web/app/desktop/tags/ui-header-nav.tag b/src/web/app/desktop/tags/ui-header-nav.tag index 447dcf238..5ffa392f5 100644 --- a/src/web/app/desktop/tags/ui-header-nav.tag +++ b/src/web/app/desktop/tags/ui-header-nav.tag @@ -3,7 +3,7 @@
  • -

    ホーム

    +

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