new build process w/ rollup

CorvusClub · Sep 9, 2017 · e18293d · e18293d
1 parent 0f12e4f
commit e18293d
Show file tree

Hide file tree

Showing 10 changed files with 798 additions and 19 deletions.
diff --git a/.gitignore b/.gitignore
@@ -8,6 +8,8 @@ yarn-error.log*
 dist/*
 !dist/index.html
 
+build
+
 # Runtime data
 pids
 *.pid

diff --git a/Gulpfile.js b/Gulpfile.js
@@ -3,21 +3,38 @@ const gulp = require('gulp');
 const ts = require('gulp-typescript');
 const tsProject = ts.createProject('tsconfig.json');
 
+const rollup = require('gulp-better-rollup');
+const sourcemaps = require('gulp-sourcemaps');
+const resolvePlugin = require('rollup-plugin-node-resolve');
+
 const browserSync = require('browser-sync');
 
 
 const paths = {
   js: './src/**/*.ts',
-  output: './dist'
+  output: './dist',
+  build: './build'
 };
 
 function build() {
   const buildResult = gulp.src(paths.js)
     .pipe(tsProject(ts.reporter.fullReporter(true)));
 
   return buildResult.js
-    .pipe(gulp.dest(paths.output))
-    .pipe(browserSync.reload({stream: true}));
+    .pipe(gulp.dest(paths.build))
+}
+
+function dist() {
+  return gulp.src(paths.build + '/**/*.js')
+    .pipe(sourcemaps.init({loadMaps: true}))
+    .pipe(rollup({plugins: [resolvePlugin()]}, 'iife'))
+    .pipe(sourcemaps.write(''))
+    .pipe(gulp.dest(paths.output));
+}
+
+function reload() {
+  browserSync.reload();
+  return Promise.resolve();
 }
 
 function watch() {
@@ -27,11 +44,14 @@ function watch() {
     },
     open: false
   });
-  gulp.watch(paths.js, build);
+  gulp.watch(paths.js, gulp.series('deploy', reload));
 }
 
 
 
 gulp.task(build);
+gulp.task(dist);
+
+gulp.task('deploy', gulp.series(build, dist));
 
-gulp.task("watch", gulp.series(build, watch));
+gulp.task("watch", gulp.series('deploy', watch));
diff --git a/dist/index.html b/dist/index.html
@@ -4,9 +4,18 @@
     <title>tactics?</title>
   </head>
   <body>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.20.18/system-production.js"></script>
-    <script>
-      SystemJS.import('./index.js');
-    </script>
+    <style>
+      body {
+        margin: 0;
+        padding: 0;
+      }
+      canvas {
+        background: cornflowerblue;
+        position: absolute;
+        top: 0;
+        left: 0;
+      }
+    </style>
+    <script src="index.js"></script>
   </body>
 </html>
-Original file line number
+Diff line change
@@ Expand Up / @@ -8,6 +8,8 @@ yarn-error.log* @@
     dist/*
     !dist/index.html
+    build
     # Runtime data
     pids
     *.pid
@@ Expand Down @@