Update opn into open, make all build steps gulp based

build.js

@@ -1,29 +1,26 @@
-const fs = require('fs-extra');
-const hbs = require('handlebars');
-const glob = require('glob');
-const sass = require('sass');
+const fs = require('fs');
 const path = require('path');
 const gulp = require('gulp');
 const include = require('gulp-include');
+const hb = require('gulp-hb');
+const sass = require('gulp-sass');
+const rename = require('gulp-rename');
+
+const hb_svg = require('handlebars-helper-svg');
 
 const BUILDDIR = process.argv[2] || './build/';
 const SLUG = 'pixel-editor';
 
 console.log('Building Pixel Editor');
 
-hbs.registerHelper('svg', require('handlebars-helper-svg'));
-require('hbs-register-helpers')(hbs,'./_ext/modules/hbs/helpers/**/*.js');
-require('hbs-register-partials')(hbs,'./_ext/modules/hbs/_*.hbs');
 
-// empty the build folder, or create it
-fs.emptyDirSync(BUILDDIR);
+function copy_images(){
+    gulp.src('./images/')
+        .pipe(gulp.dest(path.join(BUILDDIR, SLUG)));
+}
 
-
-// copy images
-fs.copySync('./images',path.join(BUILDDIR, SLUG));
-
-// render js
-gulp.src('./js/*.js')
+function render_js(){
+    gulp.src('./js/*.js')
         .pipe(include({includePaths: [
             '_ext/scripts',
             'js',
@@ -31,27 +28,32 @@ gulp.src('./js/*.js')
         ]}))
         .on('error', console.log)
         .pipe(gulp.dest(path.join(BUILDDIR, SLUG)));
+}
 
 
-// render css
-var sassFiles = glob.sync('css/*.scss');
+function render_css(){
+    gulp.src('css/*.scss')
+        .pipe(sass({includePaths: ['css', '_ext/sass', '_ext/modules/css']}))
+        .pipe(gulp.dest(path.join(BUILDDIR, SLUG)));
+}
 
-sassFiles.forEach((s) => {
-
-    var f = sass.renderSync({file: s, outFile: 'test.css', includePaths: ['css', '_ext/sass', '_ext/modules/css']});
-
-    console.log('compiling:',path.basename(f.stats.entry));
-    fs.writeFileSync(path.join(BUILDDIR, SLUG, path.basename(f.stats.entry,'scss') + 'css'), f.css);
-});
-
-
-// compile page
-var pageTemplate = hbs.compile(fs.readFileSync(path.join('./views/', SLUG + '.hbs'),{encoding: 'utf8'}));
-var page = pageTemplate({
+function compile_page(){
+    gulp.src(path.join('./views/', SLUG + '.hbs'))
+        .pipe(hb({encoding: 'utf8'})
+            .partials('./_ext/modules/_*.hbs')
+            .helpers({ svg: hb_svg })
+            .helpers('./_ext/modules/hbs/helpers/**/*.js')
+            .data({
                 projectSlug: SLUG,
                 title: 'Lospec Pixel Editor',
                 layout: false,
-});
+            }))
+        .pipe(rename('index.htm'))
+        .pipe(gulp.dest(BUILDDIR));
+}
 
-// save output
-fs.writeFileSync(path.join(BUILDDIR, 'index.htm'),page);
+
+// empty the build folder, or create it
+fs.rmdirSync(BUILDDIR, { recursive: true });
+fs.mkdirSync(BUILDDIR);
+gulp.parallel(copy_images, render_js, render_css, compile_page)();

package.json

@@ -13,14 +13,13 @@
   "dependencies": {
     "express": "^4.16.4",
     "fs-extra": "^7.0.1",
-    "glob": "^7.1.3",
-    "gulp": "^4.0.0",
+    "gulp": "^4.0.2",
+    "gulp-hb": "^8.0.0",
     "gulp-include": "^2.3.1",
+    "gulp-rename": "^2.0.0",
+    "gulp-sass": "^4.0.2",
     "handlebars-helper-svg": "git+https://bitbucket.org/skeddles/npm-handlebars-helper-svg-lospec-open-source.git",
-    "hbs": "^4.0.3",
-    "hbs-register-helpers": "git+https://skeddles@bitbucket.org/skeddles/hbs-register-helpers.git",
-    "hbs-register-partials": "git+https://skeddles@bitbucket.org/skeddles/hbs-register-partials.git",
-    "opn": "^6.0.0",
+    "open": "^6.0.0",
     "sass": "^1.17.3"
   }
 }

server.js

@@ -29,7 +29,7 @@ var server = app.listen(PORT, () => {
     console.log(`\nTemp server started at http://localhost:${PORT}!`);
     //console.log('press ctrl+c to stop ');
 
-    var opn = require('opn');
+    var opn = require('open');
 
     // opens the url in the default browser
     opn(`http://localhost:${PORT}`);