Skip to content

Instantly share code, notes, and snippets.

@ousttrue
Last active December 6, 2015 05:14
Show Gist options
  • Save ousttrue/a3865b67e84c5da39ac3 to your computer and use it in GitHub Desktop.
Save ousttrue/a3865b67e84c5da39ac3 to your computer and use it in GitHub Desktop.
mithril with typescript
# setup
#
# > npm init -y
# > npm install coffee-script gulp-load-plugins browser-sync sprintf -D
# > gulp init
gulp = require('gulp')
$ = require('gulp-load-plugins')()
browserSync = require('browser-sync').create()
fs = require('fs')
path = require('path')
execSync = require('child_process').execSync
exec = require('child_process').exec
sprintf = require('sprintf').sprintf
mkdirp = (dirpath) ->
#console.log('mkdirp %s', dirpath)
if dirpath =='.'
return
mkdirp path.dirname(dirpath)
if not fs.existsSync(dirpath)
console.log('mkdir %s', dirpath)
fs.mkdirSync(dirpath)
diraction = (dirpath, callback)->
mkdirp(dirpath)
cwd=process.cwd()
process.chdir(dirpath)
callback()
process.chdir(cwd)
npm_install = (name, is_dev)->
if not fs.existsSync('./node_modules/' + name)
console.log('install %s', name)
execSync 'npm i ' + name + (is_dev && ' -D' || ' --save')
gulp.task 'init', ->
console.log('initialize...')
npm_install('express')
npm_install('socket.io')
npm_install('body-parser')
npm_install('method-override')
npm_install('connect-logger')
npm_install('errorhandler')
npm_install('serve-static')
npm_install('mongodb')
npm_install('JSV')
npm_install('gulp-typescript', true)
npm_install('gulp-nodemon', true)
npm_install('gulp-rename', true)
npm_install('gulp-plumber', true)
if not fs.existsSync('tsconfig.json')
tsconfig={
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"removeComments": true,
"noImplicitAny": true,
"outDir": "built",
"rootDir": ".",
"sourceMap": false
},
"filesGlob": [
"./src/typings/**/*.d.ts",
"./src/server/**/*.ts",
"./src/client/ts/**/*.ts",
"./src/client/bower_components/**/*.ts",
"./src/lib/**/*.ts"
]
}
fs.writeFileSync('tsconfig.json', JSON.stringify(tsconfig, null, 2))
diraction 'src', ->
if not fs.existsSync('tsd.json')
execSync 'tsd init'
execSync 'tsd query node -rosa install'
execSync 'tsd query jquery -rosa install'
execSync 'tsd query socket.io -rosa install'
execSync 'tsd query express -rosa install'
diraction 'src/client', ->
if not fs.existsSync('bower.json')
bower_json={
"name": "client",
"authors": [
],
"description": "",
"main": "",
"moduleType": [],
"license": "MIT",
"homepage": "",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
"jquery": "~2.1.4",
"mithril": "~0.2.0"
"taffydb": "*",
"urianchor": "mmikowski/urianchor#~1.2.2",
"jquery.event.gevent": "mmikowski/jquery.event.gevent#~1.0.3",
"jquery.event.ue": "mmikowski/jquery.event.ue#~0.4.3"
}
}
fs.writeFileSync('bower.json', JSON.stringify(bower_json, null, 2))
execSync 'bower install'
if not fs.existsSync 'index.html'
fs.writeFileSync 'index.html', """
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/jquery.min.js"></script>
<script src="js/mithril.min.js"></script>
<script src="js/client.js"></script>
</head>
<body>
hello
</body>
</html>
"""
diraction 'src/client/ts', ->
if not fs.existsSync 'client.ts'
fs.writeFileSync 'client.ts', '
alert("hello");
'
diraction 'src/server', ->
if not fs.existsSync 'app.ts'
fs.writeFileSync 'app.ts', """
/// <reference path='../typings/tsd.d.ts' />
import http = require('http');
import express = require('express');
var port = process.env.port || 3000;
var app = express();
var server = http.createServer(app);
var bodyparser = require('body-parser');
var methodoverride = require('method-override');
var logger = require('connect-logger');
var errorhandler = require('errorhandler');
var servestatic = require('serve-static');
var serve_dir = __dirname + '/public';
console.log('serve %s', serve_dir);
app
.use(bodyparser())
.use(methodoverride())
.use(logger())
.use(errorhandler({
dumpExceptioons: true,
showStack: true
}))
.use(servestatic(serve_dir))
;
// socket.io
import socketio = require('socket.io');
var io = socketio(server);
io.on('connection', (socket) => {
console.log('a client connected %s', socket);
socket.on('disconnect', () => {
console.log('a client disconnected');
});
});
// start
server.listen(port);
console.log('start port: %d...', port);
"""
config={
server_ts: './src/server/**/*.ts',
server_js: ['./src/server/**/*.js', './src/server/**/*.json'],
server_js_dst: './build',
client_base: './src/client',
client_src: [
'./src/client/*.html',
'./src/client/css/*.css',
'./src/client/js/*.js',
],
client_ts: './src/client/ts/*.ts',
client_assets: './src/client/images/*',
client_dst: './build/public',
client_bower_js: [
'./src/client/bower_components/taffydb/taffy-min.js',
'./src/client/bower_components/jquery/dist/jquery.min.js',
'./src/client/bower_components/urianchor/jquery.uriAnchor.js',
'./src/client/bower_components/jquery.event.gevent/jquery.event.gevent.js',
'./src/client/bower_components/jquery.event.ue/jquery.event.ue.js',
'./src/client/bower_components/mithril/mithril.min.js',
'./src/client/bower_components/three.js/three.min.js'
],
client_dst_js: './build/public/js',
app_entry: './build/app.js',
app_port: 5000,
MONGO_HOME: 'C:/MongoDB',
mongo_data: './mongodb',
}
if fs.existsSync('./tsconfig.json')
tsconfig=require('./tsconfig.json')
# Running mongo
# http://stackoverflow.com/a/28048696/46810
gulp.task 'mongodb:start', ->
command=sprintf('%s/bin/mongod.exe --dbpath %s',
config.MONGO_HOME, config.mongo_data)
if not fs.existsSync config.mongo_data
fs.mkdirSync config.mongo_data
exec command, (err, stdout, stderr) ->
console.log(stdout);
console.log(stderr);
gulp.task 'mongodb:stop', ->
command=sprintf('%s/bin/mongo.exe --eval "use admin; db.shutdownServer();"'
, config.MONGO_HOME);
exec command, (err, stdout, stderr) ->
console.log(stdout);
console.log(stderr);
gulp.task 'serve', ['mongodb:start'], ->
$.nodemon({
script: config.app_entry
exp: 'js',
ignore: [],
env: {
port: config.app_port
}
})
#.on 'restart', ->
# browserSync.reload()
.on 'readable', ->
this.stdout.on 'data', (chunk)->
if (/^start /.test(chunk))
console.log('reloading...')
browserSync.reload()
process.stdout.write(chunk)
gulp.task 'browser-sync', ['serve'], ->
browserSync.init({
proxy: 'localhost:' + config.app_port,
port: 3000,
ws: true
})
gulp.task 'server:js', ->
gulp.src(config.server_js)
.pipe(gulp.dest config.server_js_dst)
gulp.task 'server:ts', ['server:js'], ->
gulp.src(config.server_ts)
.pipe($.plumber())
.pipe($.typescript(tsconfig.compilerOptions))
.pipe($.rename((path)->path.dirname=''))
.pipe(gulp.dest config.server_js_dst)
gulp.task 'server', ['server:js', 'server:ts']
gulp.task 'client:bower_js', ->
gulp.src(config.client_bower_js)
.pipe(gulp.dest config.client_dst_js)
gulp.task 'client:assets', ->
gulp.src(config.client_assets, {base: config.client_base})
.pipe(gulp.dest config.client_dst)
gulp.task 'client:user', ->
gulp.src(config.client_src, {base: config.client_base})
.pipe(gulp.dest config.client_dst)
.pipe(browserSync.stream())
gulp.task 'client:user_ts', ->
gulp.src(config.client_ts)
.pipe($.plumber())
.pipe($.typescript(tsconfig.compilerOptions))
.pipe($.rename((path)->path.dirname=''))
.pipe(gulp.dest config.client_dst_js)
.pipe(browserSync.stream())
gulp.task 'client', ['client:bower_js', 'client:assets', 'client:user', 'client:user_ts']
gulp.task 'build', ['server', 'client']
gulp.task 'watch', ->
gulp.watch(config.server_js, ['server:js'])
gulp.watch(config.server_ts, ['server:ts'])
gulp.watch(config.client_src, ['client:user'])
gulp.watch(config.client_ts, ['client:user_ts'])
gulp.task 'default', ['build', 'watch', 'browser-sync']
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment