From 622f2f5598b8c03d6f3179d55057e55f4bcf6b66 Mon Sep 17 00:00:00 2001
From: Klaus Weidinger
Date: Mon, 7 Feb 2022 18:36:20 +0100
Subject: [PATCH 1/2] Fix and refactor gulp
---
.gitignore | 2 +-
.nvmrc | 1 +
README.md | 25 +-
misc/demo.html => demo.html | 4 +-
gulpfile.js | 75 +-
misc/rptest_template.html | 58 -
package-lock.json | 11130 ++++++++++++++++
package.json | 2 +-
.../local_demo.html | 4 +-
templates/mocha.html | 58 +
10 files changed, 11253 insertions(+), 106 deletions(-)
create mode 100644 .nvmrc
rename misc/demo.html => demo.html (95%)
delete mode 100644 misc/rptest_template.html
create mode 100644 package-lock.json
rename misc/demo_local.html => templates/local_demo.html (94%)
create mode 100644 templates/mocha.html
diff --git a/.gitignore b/.gitignore
index 60eb699..5f6c5b0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -22,4 +22,4 @@
/local
# Idea project stuff
-.idea
\ No newline at end of file
+.idea
diff --git a/.nvmrc b/.nvmrc
new file mode 100644
index 0000000..6c5e45b
--- /dev/null
+++ b/.nvmrc
@@ -0,0 +1 @@
+lts/gallium
diff --git a/README.md b/README.md
index f8bbc63..266ef95 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@ Roofpig is an animated, programmable and interactive Rubik's Cube for the modern
It should work on most [any modern browser](http://caniuse.com/canvas).
## 1. Usage
-All you need is one file and a web server. Put [`roofpig_and_three.min.js`](https://raw.githubusercontent.com/larspetrus/Roofpig/master/roofpig_and_three.min.js) on your server. Include it, and jQuery 3.1.1 in your HTML:
+All you need is one file and a web server. Put [`roofpig_and_three.min.js`](https://raw.githubusercontent.com/dunkelziffer/Roofpig/development/roofpig_and_three.min.js) on your server. Include it, and jQuery 3.1.1 in your HTML:
```html
@@ -26,7 +26,7 @@ CubeAnimation.create_in_dom('#show-alg', "alg=R U R' U R U2 R'", "class='my-roof
## 2. data-config
-In `data-config` you set values to properties. The format is `property1=value|prop2=other value | prop99=you get the idea`.
+In `data-config` you set values to properties. The format is `property1=value|prop2=other value|prop99=you get the idea`.
This is a fully configured example cube:
@@ -140,22 +140,27 @@ To share between pages, you can for example put **"ROOFPIG_CONF_"**'s in a commo
### 3. Working with the code
1. Install Node and NPM - https://docs.npmjs.com/getting-started/installing-node
-2. Clone/download this Github repository, and `cd` to the resulting directory
-3. `npm install`
-4. `sudo npm install -g gulp`
+2. Install nvm - https://github.com/nvm-sh/nvm
+3. Clone/download this Github repository, and `cd` to the resulting directory
+4. `nvm install lts/gallium`
+5. `nvm use`
+6. `npm install`
+7. `sudo npm install -g gulp`
Now the gulp task below should work. Let me know if it doesn't.
-#### Building it
+#### Running the prebuilt release version
+
+The `demo.html` in the root directory shows multiple examples using the current release version.
-`gulp build` on the command line creates a `roofpig_and_three.min.js` file in `local/build/`
+#### Building it
-`misc/demo_local.html` is a demo page using the built file. `misc/demo.html` is the same demo using the official release file.
+Running `gulp build` or simply `gulp` on the command line creates a `roofpig_and_three.min.js` and a `local_demo.html` file in `local/build/`.
+#### Testing it
-#### Testing
+Running `gulp test` creates everything needed for testing in `local/test/`. Open `mocha.html` in a browser to run the tests suite.
-`gulp test` makes the `rptest.html` file for running the tests in a browser. `open rptest.html` is one way.
## 4. What's a Roofpig anyway?
[**"Most unexpected!"**](https://www.youtube.com/watch?v=PtO0diaiZEE&t=14m57s)
diff --git a/misc/demo.html b/demo.html
similarity index 95%
rename from misc/demo.html
rename to demo.html
index d833af6..0ede206 100644
--- a/misc/demo.html
+++ b/demo.html
@@ -44,7 +44,7 @@ Official release version
-
-
+
+
diff --git a/gulpfile.js b/gulpfile.js
index be4ee57..fb874a2 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -9,42 +9,48 @@ var uglify = require('gulp-uglify');
var dateFormat = require('dateformat');
var del = require('del');
-var filenames = require('gulp-filenames');
var replace = require('gulp-replace');
+// ------------- BUILD -----
+
var build_dir = 'local/build/';
-var rp_js_file = 'roofpig.js';
+var roofpig_file = 'roofpig.js';
var extras_file = '3extras.js';
var release_file = 'roofpig_and_three.min.js';
-// ------------- BUILD -----
-
-gulp.task('clean-build', function() {
+function cleanBuild() {
return del(build_dir +'**/*');
-});
+}
-gulp.task('build-rp', ['clean-build'], function() {
+function roofpig() {
return gulp.src('src/**/*.coffee')
.pipe(cofcon('roofpig.coffee'))
.pipe(coffee({bare: true}).on('error', gutil.log))
.pipe(replace('@@BUILT_WHEN@@', dateFormat(new Date(), "yyyy-mm-dd HH:MM")))
.pipe(uglify())
.pipe(gulp.dest(build_dir));
-});
+}
-gulp.task('build-3x', ['clean-build'], function() {
+function extras() {
return gulp.src(['lib/Projector.js', 'lib/CanvasRenderer.js'])
.pipe(uglify())
.pipe(concat(extras_file))
+ .pipe(gulp.dest(build_dir));
+}
+
+async function copyDemo() {
+ return gulp.src('templates/local_demo.html')
.pipe(gulp.dest(build_dir));
-});
+}
-gulp.task('build', ['build-rp', 'build-3x'], function() {
- gulp.src(['lib/three.min.js', build_dir + extras_file, build_dir + rp_js_file])
+async function combine() {
+ return gulp.src(['lib/three.min.js', build_dir + extras_file, build_dir + roofpig_file])
.pipe(concat(release_file))
.pipe(gulp.dest(build_dir));
-});
+}
+
+exports.default = exports.build = gulp.series(cleanBuild, gulp.parallel(roofpig, extras, copyDemo), combine);
// ------------- TEST -----
@@ -53,37 +59,42 @@ var rename = require("gulp-rename");
var glob = require("glob");
//var sourcemaps = require('gulp-sourcemaps');
-var js_dir = 'local/test_js/';
-var test_js_dir = js_dir+'test/';
+var test_dir = 'local/test/';
+var rel_source_dir = 'src/';
+var source_dir = test_dir + rel_source_dir;
+var rel_spec_dir = 'specs/';
+var spec_dir = test_dir + rel_spec_dir;
-gulp.task('clean-js', function() {
- return del(js_dir+'**/*');
-});
+function cleanTest() {
+ return del(test_dir + '**/*');
+}
-gulp.task('compile-test', ['clean-js'], function() {
+function compileSpecs() {
return gulp.src('test/**/*.coffee')
// .pipe(sourcemaps.init())
.pipe(coffee({bare: true}).on('error', gutil.log))
// .pipe(sourcemaps.write())
- .pipe(gulp.dest(test_js_dir));
-});
+ .pipe(gulp.dest(spec_dir));
+}
-gulp.task('compile-src', ['clean-js'], function() {
+function compileTestSource() {
return gulp.src('src/**/*.coffee')
.pipe(coffee({bare: true}).on('error', gutil.log))
- .pipe(gulp.dest(js_dir+'src'));
-});
+ .pipe(gulp.dest(source_dir));
+}
-gulp.task('test', ['compile-test', 'compile-src'], function(){
+function renderMochaTemplate() {
var test_html = '';
- glob.sync(test_js_dir+'**/*.js', {}).forEach(function(test_file){
- test_html += '\n';
+ glob.sync('**/*.js', {cwd: spec_dir}).forEach(function(test_file) {
+ test_html += '\n';
});
- console.log("\nTests generated. `open rptest.html` can run them!\n")
+ console.log("\nTests generated. `open local/test/mocha.html` can run them!\n")
- return gulp.src('misc/rptest_template.html')
+ return gulp.src('templates/mocha.html')
.pipe(replace('@@TEST_FILES_GO_HERE@@', test_html))
- .pipe(rename('rptest.html'))
- .pipe(gulp.dest('.'));
-});
+ .pipe(rename('mocha.html'))
+ .pipe(gulp.dest(test_dir));
+}
+
+exports.test = gulp.series(cleanTest, gulp.parallel(compileSpecs, compileTestSource), renderMochaTemplate);
diff --git a/misc/rptest_template.html b/misc/rptest_template.html
deleted file mode 100644
index 8649826..0000000
--- a/misc/rptest_template.html
+++ /dev/null
@@ -1,58 +0,0 @@
-
-