diff --git a/gulpfile.ts b/gulpfile.ts index e70e13798..30812bead 100644 --- a/gulpfile.ts +++ b/gulpfile.ts @@ -12,7 +12,6 @@ import * as tslint from 'gulp-tslint'; import * as glob from 'glob'; import * as es from 'event-stream'; import * as webpack from 'webpack-stream'; -import stylus = require('gulp-stylus'); import cssnano = require('gulp-cssnano'); import * as uglify from 'gulp-uglify'; import riotify = require('riotify'); @@ -160,29 +159,40 @@ gulp.task('build:client:scripts', () => new Promise(async (ok) => { // TODO: remove this block if (isProduction) { stream = stream + // ↓ https://github.com/mishoo/UglifyJS2/issues/448 + .pipe(babel({ + presets: ['es2015'] + })) + .pipe(uglify()); + } + + let entryPointStream = gulp.src('./src/web/app/client/script.js'); + + if (isProduction) { + entryPointStream = entryPointStream // ↓ https://github.com/mishoo/UglifyJS2/issues/448 .pipe(babel({ presets: ['es2015'] })) .pipe(uglify({ - compress: true + mangle: { + toplevel: true + } })); } - stream.pipe(gulp.dest('./built/web/resources/')); + es.merge( + stream.pipe(gulp.dest('./built/web/resources/')), + entryPointStream.pipe(gulp.dest('./built/web/resources/client/')) + ); ok(); })); gulp.task('build:client:styles', () => - gulp.src('./src/web/app/init.styl') - .pipe(stylus({ - compress: true - })) + gulp.src('./src/web/app/init.css') .pipe(isProduction - ? cssnano({ - safe: true // 高度な圧縮は無効にする (一部デザインが不適切になる場合があるため) - }) + ? cssnano() : gutil.noop()) .pipe(gulp.dest('./built/web/resources/')) ); diff --git a/package.json b/package.json index 92aa2f95a..153f63eb9 100644 --- a/package.json +++ b/package.json @@ -101,7 +101,6 @@ "gulp-pug": "3.2.0", "gulp-rename": "1.2.2", "gulp-replace": "0.5.4", - "gulp-stylus": "2.6.0", "gulp-tslint": "7.1.0", "gulp-typescript": "3.1.5", "gulp-uglify": "2.0.1", diff --git a/src/web/app/init.css b/src/web/app/init.css new file mode 100644 index 000000000..2a277a9c8 --- /dev/null +++ b/src/web/app/init.css @@ -0,0 +1,62 @@ +@charset 'utf-8'; + +html { + font-family: sans-serif; +} + +body > noscript > div { + position: fixed; + z-index: 32768; + top: 0; + left: 0; + width: 100%; + height: 100%; + text-align: center; + background: #fff; +} + body > noscript > div > p { + display: block; + margin: 32px; + font-size: 2em; + color: #555; + } + +#init { + position: fixed; + z-index: 16384; + top: 0; + left: 0; + width: 100%; + height: 100%; + text-align: center; + background: #fff; + cursor: wait; +} + #init > p { + display: block; + user-select: none; + margin: 32px; + font-size: 4em; + color: #555; + } + #init > p > span { + animation: init 1.4s infinite ease-in-out both; + } + #init > p > span:nth-child(1) { + animation-delay: 0s; + } + #init > p > span:nth-child(2) { + animation-delay: 0.16s; + } + #init > p > span:nth-child(3) { + animation-delay: 0.32s; + } + +@keyframes init { + 0%, 80%, 100% { + opacity: 1; + } + 40% { + opacity: 0; + } +} diff --git a/src/web/app/init.styl b/src/web/app/init.styl deleted file mode 100644 index 972997725..000000000 --- a/src/web/app/init.styl +++ /dev/null @@ -1,56 +0,0 @@ -@charset 'utf-8' - -html - font-family sans-serif - -body > noscript > div - position fixed - z-index 32768 - top 0 - left 0 - width 100% - height 100% - text-align center - background #fff - - > p - display block - margin 32px - font-size 2em - color #555 - -#init - position fixed - z-index 16384 - top 0 - left 0 - width 100% - height 100% - text-align center - background #fff - cursor wait - - > p - display block - user-select none - margin 32px - font-size 4em - color #555 - - > span - animation init 1.4s infinite ease-in-out both - - &:nth-child(1) - animation-delay 0s - - &:nth-child(2) - animation-delay 0.16s - - &:nth-child(3) - animation-delay 0.32s - - @keyframes init - 0%, 80%, 100% - opacity 1 - 40% - opacity 0 diff --git a/webpack.config.ts b/webpack.config.ts index 03c8007cd..195c433a9 100644 --- a/webpack.config.ts +++ b/webpack.config.ts @@ -7,7 +7,6 @@ module.exports = (config, commit, env) => { const pack: webpack.Configuration = { entry: { - 'client': './src/web/app/client/script.js', 'desktop': './src/web/app/desktop/script.js', 'mobile': './src/web/app/mobile/script.js', 'dev': './src/web/app/dev/script.js',