aljaz/ttyd
1
1
Fork 0
mirror of https://github.com/tsl0922/ttyd.git synced 2025-12-22 20:04:19 +01:00
Code Issues Packages Projects Releases Wiki Activity

html: add development server

Browse Source
This commit is contained in:
Shuanglei Tao
2018-05-02 23:27:50 +08:00
parent 2d78f5c6a5
commit 68b58829cd
9 changed files with 3148 additions and 448 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
html/README.md
View File

@@ -1,10 +1,12 @@
# Building the inlined html ## Prerequisites
install [Yarn](https://yarnpkg.com), then run the following commands: install [Yarn](https://yarnpkg.com), and run: `yarn install`.
```bash ## Development
yarn
yarn run build
```
this will compile the inlined html to `../src/index.html`. 1. Start ttyd: `ttyd bash`
2. Start the dev server: `yarn run start`
## Publish
Run `yarn run build`, this will compile the inlined html to `../src/index.html`.

18
html/gulpfile.js
View File

@@ -1,18 +1,14 @@
const gulp = require('gulp'), const gulp = require('gulp'),
inlinesource = require('gulp-inline-source'), clean = require('gulp-clean'),
webpack = require('webpack-stream'); inlinesource = require('gulp-inline-source');
gulp.task('webpack', function() { gulp.task('clean', function () {
return gulp.src([ return gulp.src('dist', {read: false})
'js/app.js', .pipe(clean());
'sass/app.scss'
])
.pipe(webpack(require('./webpack.config.js')))
.pipe(gulp.dest('dist/'));
}); });
gulp.task('inlinesource', ['webpack'], function () { gulp.task('inlinesource', function () {
return gulp.src('index.html') return gulp.src('dist/index.html')
.pipe(inlinesource()) .pipe(inlinesource())
.pipe(gulp.dest('../src/')); .pipe(gulp.dest('../src/'));
}); });

2
html/index.html
View File

@@ -5,7 +5,6 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>ttyd - Terminal</title> <title>ttyd - Terminal</title>
<link inline rel="icon" type="image/png" href="favicon.png"> <link inline rel="icon" type="image/png" href="favicon.png">
<link inline href="dist/bundle.css">
</head> </head>
<body> <body>
<div id="terminal-container"></div> <div id="terminal-container"></div>
@@ -42,6 +41,5 @@
</div> </div>
</div> </div>
<script src="auth_token.js"></script> <script src="auth_token.js"></script>
<script inline src="dist/bundle.js"></script>
</body> </body>
</html> </html>

2
html/js/app.js
View File

@@ -1,3 +1,5 @@
require('../sass/app.scss');
// polyfills for ie11 // polyfills for ie11
require('core-js/fn/array'); require('core-js/fn/array');
require('core-js/fn/object'); require('core-js/fn/object');

21
html/package.json
View File

@@ -10,7 +10,9 @@
"author": "Shuanglei Tao <tsl0922@gmail.com>", "author": "Shuanglei Tao <tsl0922@gmail.com>",
"license": "MIT", "license": "MIT",
"scripts": { "scripts": {
"build": "gulp" "build": "webpack --config webpack.prod.js && gulp",
"clean": "gulp clean",
"start": "webpack-serve webpack.dev.js"
}, },
"dependencies": { "dependencies": {
"bulma": "^0.6.1", "bulma": "^0.6.1",
@@ -20,16 +22,25 @@
"zmodem.js": "^0.1.5" "zmodem.js": "^0.1.5"
}, },
"devDependencies": { "devDependencies": {
"babel-core": "^6.26.0", "babel-core": "^6.26.3",
"babel-loader": "^7.1.2", "babel-loader": "^7.1.4",
"babel-preset-env": "^1.6.1", "babel-preset-env": "^1.6.1",
"copy-webpack-plugin": "^4.5.1",
"css-loader": "^0.28.8", "css-loader": "^0.28.8",
"extract-text-webpack-plugin": "^3.0.2",
"gulp": "^3.9.1", "gulp": "^3.9.1",
"gulp-clean": "^0.4.0",
"gulp-inline-source": "^3.1.0", "gulp-inline-source": "^3.1.0",
"html-webpack-inline-source-plugin": "^0.0.10",
"html-webpack-plugin": "^3.2.0",
"http-proxy-middleware": "^0.18.0",
"koa-connect": "^2.0.1",
"mini-css-extract-plugin": "^0.4.0",
"node-sass": "^4.7.2", "node-sass": "^4.7.2",
"sass-loader": "^6.0.6", "sass-loader": "^6.0.6",
"style-loader": "^0.19.1", "style-loader": "^0.19.1",
"webpack-stream": "^4.0.0" "webpack": "^4.6.0",
"webpack-cli": "^2.1.2",
"webpack-merge": "^4.1.2",
"webpack-serve": "^0.3.2"
} }
} }

34
html/webpack.config.js
View File

@@ -1,8 +1,12 @@
const ExtractTextPlugin = require("extract-text-webpack-plugin"); const CopyWebpackPlugin = require('copy-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const devMode = process.env.NODE_ENV !== 'production';
module.exports = { module.exports = {
entry: './js/app.js',
output: { output: {
filename: 'bundle.js' path: __dirname + '/dist',
filename: devMode ? '[name].js' : '[name].[hash].js'
}, },
module: { module: {
rules: [ rules: [
@@ -15,22 +19,24 @@ module.exports = {
presets: ['env'] presets: ['env']
} }
} }
}, { },
test: /\.scss$/, {
use: ExtractTextPlugin.extract({ test: /\.s?[ac]ss$/,
use: [{ use: [
loader: "css-loader" devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
}, { 'css-loader',
loader: "sass-loader" 'sass-loader',
}], ]
fallback: "style-loader"
})
} }
] ]
}, },
plugins: [ plugins: [
new ExtractTextPlugin({ new CopyWebpackPlugin([
filename: 'bundle.css', {from: 'favicon.png', to: '.' }
], {}),
new MiniCssExtractPlugin({
filename: devMode ? '[name].css' : '[name].[hash].css',
chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
}) })
] ]
} }

32
html/webpack.dev.js Normal file
View File

@@ -0,0 +1,32 @@
const merge = require('webpack-merge');
const convert = require('koa-connect');
const proxy = require('http-proxy-middleware');
const config = require('./webpack.config.js');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = merge(config, {
devtool: 'source-map',
mode: 'development',
plugins: [
new HtmlWebpackPlugin({
template: 'index.html'
})
],
serve: {
content: __dirname + '/dist',
add: (app, middleware, options) => {
var ttydProxy = proxy(
[
'/ws',
'/auth_token.js'
],
{
target: 'http://127.0.0.1:7681',
ws: true
}
);
app.use(convert(ttydProxy));
}
}
});

16
html/webpack.prod.js Normal file
View File

@@ -0,0 +1,16 @@
const merge = require('webpack-merge');
const config = require('./webpack.config.js');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');
module.exports = merge(config, {
mode: 'production',
plugins: [
new HtmlWebpackPlugin({
inlineSource: '.(js|css)$',
template: 'index.html'
}),
new HtmlWebpackInlineSourcePlugin()
]
});

3455
html/yarn.lock
View File

File diff suppressed because it is too large Load Diff