瀏覽代碼

Add gulp for automated builds & Boostrap for FE

Can now build all with 'gulp' (if gulp-cli installed)

Big commit. Breakdown:
 - .gitignore includes gulpfile.js (otehrwise excluded)
 - gulpfile sets up build steps + browsersync
 - src/ files for FE (stub for now)
 - moved ts to src/ for consistency
 - update tsconfig with new paths
 - package.json lists new reqs
tags/v0.1.3
bertieb 3 年之前
父節點
當前提交
75385132a9
共有 9 個檔案被更改,包括 203 行新增14 行删除
  1. +2
    -0
      .gitignore
  2. +47
    -0
      gulpfile.js
  3. +18
    -13
      package.json
  4. +100
    -0
      src/css/dashboard.css
  5. +34
    -0
      src/html/index.html
  6. +1
    -0
      src/scss/asphotheme.scss
  7. +0
    -0
      src/ts/asphodice.ts
  8. +0
    -0
      src/ts/rollstats.ts
  9. +1
    -1
      tsconfig.json

+ 2
- 0
.gitignore 查看文件

@@ -1,3 +1,5 @@
*.js
node_modules/
package-lock.json
dist/
!gulpfile.js

+ 47
- 0
gulpfile.js 查看文件

@@ -0,0 +1,47 @@
let gulp = require("gulp");
let browserSync = require("browser-sync").create();
let sass = require("gulp-sass");

var ts = require("gulp-typescript");
var tsProject = ts.createProject("tsconfig.json");

var paths = {
pages: ["src/html/*.html"],
css: ["src/css/*.css"],
};

// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
return gulp.src("src/scss/*.scss")
.pipe(sass())
.pipe(gulp.dest("dist/css"))
.pipe(browserSync.stream());
});

gulp.task("copy-html", function () {
return gulp.src(paths.pages).pipe(gulp.dest("dist"));
});

gulp.task("copy-css", function () {
return gulp.src(paths.css).pipe(gulp.dest("dist/css"));
});

gulp.task("compile-ts", function () {
return tsProject.src().pipe(tsProject()).js.pipe(gulp.dest("dist"));
});

// Static Server + compile ts + watch scss/html/css files
gulp.task('serve', gulp.series("compile-ts", 'sass', "copy-html", "copy-css", function() {

browserSync.init({
server: "./dist/"
});

gulp.watch("src/scss/*.scss", gulp.series('sass'));
gulp.watch("src/css/*.css").on('change', gulp.series("copy-css"));
gulp.watch("src/html/*.html").on('change', gulp.series("copy-html"));
gulp.watch("dist/*.html").on('change', browserSync.reload);
}));


gulp.task('default', gulp.series('serve'));

+ 18
- 13
package.json 查看文件

@@ -2,17 +2,22 @@
"name": "asphodice",
"version": "0.1.0",
"description": "Dice roller for Asphodel. Includes statistical information",
"devDependencies": {
"@types/chai": "^4.2.14",
"@types/mocha": "^8.2.0",
"@types/node": "^14.14.22"
},
"dependencies": {
"chai": "^4.3.0",
"mocha": "^8.2.1",
"ts-node": "^9.1.1"
},
"scripts": {
"test": "mocha -r ts-node/register ./**/*.spec.ts"
}
"devDependencies": {
"@types/chai": "^4.2.14",
"@types/mocha": "^8.2.0",
"@types/node": "^14.14.22",
"browser-sync": "^2.26.14",
"gulp": "^4.0.2",
"gulp-sass": "^4.1.0",
"gulp-typescript": "^6.0.0-alpha.1"
},
"dependencies": {
"bootstrap": "^5.0.0-beta2",
"chai": "^4.3.0",
"mocha": "^8.2.1",
"ts-node": "^9.1.1"
},
"scripts": {
"test": "mocha -r ts-node/register ./**/*.spec.ts"
}
}

+ 100
- 0
src/css/dashboard.css 查看文件

@@ -0,0 +1,100 @@
body {
font-size: .875rem;
}

.feather {
width: 16px;
height: 16px;
vertical-align: text-bottom;
}

/*
* Sidebar
*/

.sidebar {
position: fixed;
top: 0;
/* rtl:raw:
right: 0;
*/
bottom: 0;
/* rtl:remove */
left: 0;
z-index: 100; /* Behind the navbar */
padding: 48px 0 0; /* Height of navbar */
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}

@media (max-width: 767.98px) {
.sidebar {
top: 5rem;
}
}

.sidebar-sticky {
position: relative;
top: 0;
height: calc(100vh - 48px);
padding-top: .5rem;
overflow-x: hidden;
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
}

.sidebar .nav-link {
font-weight: 500;
color: #333;
}

.sidebar .nav-link .feather {
margin-right: 4px;
color: #727272;
}

.sidebar .nav-link.active {
color: #007bff;
}

.sidebar .nav-link:hover .feather,
.sidebar .nav-link.active .feather {
color: inherit;
}

.sidebar-heading {
font-size: .75rem;
text-transform: uppercase;
}

/*
* Navbar
*/

.navbar-brand {
padding-top: .75rem;
padding-bottom: .75rem;
font-size: 1rem;
background-color: rgba(0, 0, 0, .25);
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
}

.navbar .navbar-toggler {
top: .25rem;
right: 1rem;
}

.navbar .form-control {
padding: .75rem 1rem;
border-width: 0;
border-radius: 0;
}

.form-control-dark {
color: #fff;
background-color: rgba(255, 255, 255, .1);
border-color: rgba(255, 255, 255, .1);
}

.form-control-dark:focus {
border-color: transparent;
box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
}

+ 34
- 0
src/html/index.html 查看文件

@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Asphodel Dice Roller</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<link rel="stylesheet" href="css/asphotheme.css">
<link rel="stylesheet" href="css/dashboard.css">
<script src="rollstats.js" type="text/javascript"></script>
</head>
<body>
<header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
<a class="navbar-brand col-md-3 col-lg-2 me-0 px-3" href="#">Dice Roller</a>
</header>
<div class="container">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<h1>Asphodice Roller</h1>
<p>This lets you roll an arbitrary number of Asphodice!</p>

<form>
<label for="numRolls">Number of Rolls</label><br />
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon-3">Roll</span>
<input type="number" class="form-control" id="numRolls" placeholder="100000" aria-describedby="basic-addon3">
<span class="input-group-text">times</span>
</div>
<label for="numDice" class="form-label">Number of Dice</label>
<input type="range" class="form-range" id="numDice" min="1" max="20">
<button class="btn btn-primary">Roll!</button>
</form>
</div>
</body>
</html>

+ 1
- 0
src/scss/asphotheme.scss 查看文件

@@ -0,0 +1 @@
@import "../../node_modules/bootstrap/scss/bootstrap.scss";

asphodice.ts → src/ts/asphodice.ts 查看文件


rollstats.ts → src/ts/rollstats.ts 查看文件


+ 1
- 1
tsconfig.json 查看文件

@@ -67,5 +67,5 @@
"skipLibCheck": true, /* Skip type checking of declaration files. */
"forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
},
"include": [ "dice.ts", "rollstats.ts" ]
"include": [ "./src/ts/dice.ts", "./src/ts/rollstats.ts" ]
}

Loading…
取消
儲存