From d73706a487e286be65516825cc2c2dd8e6bbc3b5 Mon Sep 17 00:00:00 2001
From: Alexshcer <alexmerser591@gmail.com>
Date: Mon, 15 May 2023 08:47:51 +0530
Subject: [PATCH] Fixed gulpfile.js & package.json, now it works!

---
 spectrogram/.gitignore                 |   1 +
 spectrogram/gulpfile.js                | 179 +++++++++---------
 spectrogram/package.json               |  46 ++---
 spectrogram/src/sass/fonts/_icons.scss | 242 ++++++++++++-------------
 4 files changed, 239 insertions(+), 229 deletions(-)

diff --git a/spectrogram/.gitignore b/spectrogram/.gitignore
index b38db2f29..cccef790c 100644
--- a/spectrogram/.gitignore
+++ b/spectrogram/.gitignore
@@ -1,2 +1,3 @@
 node_modules/
 build/
+package-lock.json
\ No newline at end of file
diff --git a/spectrogram/gulpfile.js b/spectrogram/gulpfile.js
index 3b03ee18a..c84270433 100755
--- a/spectrogram/gulpfile.js
+++ b/spectrogram/gulpfile.js
@@ -1,116 +1,121 @@
 // -----------------------------------------------------------
-var gulp 			= require('gulp'),
-	sass 			= require('gulp-sass'),
-	autoPrefixer 	= require('gulp-autoprefixer'),
-	minifyCSS 		= require('gulp-minify-css'),
-	browserify 		= require('gulp-browserify'),
-	uglify 			= require('gulp-uglify'),
-	concat			= require('gulp-concat'),
-	copy 			= require('gulp-copy'),
-	livereload 		= require('gulp-livereload'),
-	jade 			= require('gulp-jade'),
-	imagemin 		= require('gulp-imagemin'),
-	cache 			= require('gulp-cache'),
-	webserver 		= require('gulp-webserver'),
-	iconfont 		= require('gulp-iconfont'),
-	iconfontCss 	= require('gulp-iconfont-css');
+const gulp = require('gulp');
+const sass = require('gulp-sass')(require('sass'));
+const autoPrefixer = require('gulp-autoprefixer');
+const cleanCSS = require('gulp-clean-css');
+const browserify = require('browserify');
+const source = require('vinyl-source-stream');
+const buffer = require('vinyl-buffer');
+const uglify = require('gulp-uglify');
+const concat = require('gulp-concat');
+const copy = require('gulp-copy');
+const livereload = require('gulp-livereload');
+const pug = require('gulp-pug');
+const imagemin = require('gulp-imagemin');
+const cache = require('gulp-cache');
+const webserver = require('gulp-webserver');
+const iconfont = require('gulp-iconfont');
+const iconfontCss = require('gulp-iconfont-css');
 // -----------------------------------------------------------
 
-
-gulp.task('sass', function() {
-	gulp.src("src/sass/*.scss")
-	.pipe(sass())
-	.on('error', function(error) {
-		console.log(error);
-		this.emit('end');
-	})
-	.pipe(autoPrefixer())
-	.pipe(minifyCSS())
-	.pipe(gulp.dest("build/css"));
+gulp.task('sass', function () {
+  return gulp.src("src/sass/*.scss")
+    .pipe(sass())
+    .on('error', function (error) {
+      console.log(error);
+      this.emit('end');
+    })
+    .pipe(autoPrefixer())
+    .pipe(cleanCSS())
+    .pipe(gulp.dest("build/css"));
 });
-gulp.task('templates', function() {
-  gulp.src('src/jade/**/*.jade')
-	.pipe(jade({}))
-	.on('error', function(error) {
-		console.log(error);
-		this.emit('end');
-	})
-	.pipe(gulp.dest('./build'))
+
+gulp.task('templates', function () {
+  return gulp.src('src/jade/**/*.jade')
+    .pipe(pug({}))
+    .on('error', function (error) {
+      console.log(error);
+      this.emit('end');
+    })
+    .pipe(gulp.dest('./build'))
 });
-gulp.task('images', function() {
+
+gulp.task('images', function () {
   return gulp.src('./src/images/**/*')
     .pipe(cache(
-    	imagemin(
-    		{
-    			optimizationLevel: 3,
-    			progressive: true,
-    			interlaced: true
-    		}
-    	)
+      imagemin(
+        {
+          optimizationLevel: 3,
+          progressive: true,
+          interlaced: true
+        }
+      )
     ))
     .pipe(gulp.dest('./build/img'));
 });
-gulp.task('browserify', function() {
-	gulp.src(['src/javascripts/main.js'])
-	.pipe(browserify({
-		insertGlobals: true,
-		debug: true
-	}))
-	.on('error', function(error) {
-		console.log(error);
-		this.emit('end');
-	})
-	.pipe(uglify())
-	.pipe(concat('app.js'))
-	.pipe(gulp.dest('build/js'));
+
+gulp.task('browserify', function () {
+  return browserify('src/javascripts/main.js', { debug: true })
+    .bundle()
+    .on('error', function (error) {
+      console.log(error);
+      this.emit('end');
+    })
+    .pipe(source('app.js'))
+    .pipe(buffer())
+    .pipe(uglify())
+    .pipe(gulp.dest('build/js'));
 });
 
-gulp.task('bundle-libs', function() {
+gulp.task('bundle-libs', function () {
   return gulp.src('src/javascripts/o3djs/*.js')
     .pipe(concat('bundle.js'))
     // .pipe(uglify())
     .pipe(gulp.dest('build/js'));
 });
 
-gulp.task('insert-bin',function(){
-	return gulp.src('src/bin/**')
-	.pipe(copy('build/bin',{
-		prefix:2
-	}));
+gulp.task('insert-bin', function () {
+  return gulp.src('src/bin/**')
+    .pipe(copy('build/bin', {
+      prefix: 2
+    }));
 });
 
-gulp.task('iconfont', function(){
-	gulp.src(['src/icons/*.svg'])
-	.pipe(iconfontCss({
-		fontName: "icons",
-		path: 'src/assets/templates/_icons.scss',
-		targetPath: '../../../../src/sass/fonts/_icons.scss',
-		fontPath: '../bin/fonts/icons/'
-	}))
-	.pipe(iconfont({
-		fontName: "icons",
-		normalize: true
-	}))
-	.pipe(gulp.dest('build/bin/fonts/icons/'));
+gulp.task('iconfont', function (done) {
+  gulp.src(['src/icons/*.svg'])
+    .pipe(iconfontCss({
+      fontName: "icons",
+      path: 'src/assets/templates/_icons.scss',
+      targetPath: '../../../../src/sass/fonts/_icons.scss',
+      fontPath: '../bin/fonts/icons/'
+    }))
+    .pipe(iconfont({
+      fontName: "icons",
+      normalize: true
+    }))
+    .pipe(gulp.dest('build/bin/fonts/icons/'))
+    .on('end', done);
 });
 
-gulp.task('webserver', function() {
-  gulp.src('./build')
+gulp.task('webserver', function () {
+  return gulp.src('./build')
     .pipe(webserver({
       livereload: true,
       open: true,
       fallback: 'index.html'
     }));
 });
-gulp.task('watch', function() {
-	gulp.watch("src/icons/**/*.svg", 		['iconfont'		]);
-	gulp.watch("src/assets/**/*", 			['iconfont'		]);
-	gulp.watch("src/sass/**/*", 			['sass'			]);
-	gulp.watch('src/jade/**/*.jade', 		['templates'	]);
-	gulp.watch('src/javascripts/**', 		['browserify'	]);
-	gulp.watch('src/javascripts/lib/**', 	['bundle-libs'	]);
-	gulp.watch('src/images/**', 			['images'		]);
-	gulp.watch('src/bin/**', 				['insert-bin'	]);
+
+gulp.task('watch', function () {
+  gulp.watch("src/icons/**/*.svg", gulp.series('iconfont'));
+  gulp.watch("src/assets/**/*", gulp.series('iconfont'));
+  gulp.watch("src/sass/**/*", gulp.series('sass'));
+  gulp.watch('src/jade/**/*.jade', gulp.series('templates'));
+  gulp.watch('src/javascripts/**', gulp.series('browserify'));
+  gulp.watch('src/javascripts/lib/**', gulp.series('bundle-libs'));
+  gulp.watch('src/images/**', gulp.series('images'));
+  gulp.watch('src/bin/**', gulp.series('insert-bin'));
 });
-gulp.task('build-all',['iconfont','sass','templates','browserify','bundle-libs','images','insert-bin']);
-gulp.task('default',['watch','webserver']);
+
+gulp.task('build-all', gulp.parallel('iconfont', 'sass', 'templates', 'browserify', 'bundle-libs', 'images', 'insert-bin'));
+gulp.task('default', gulp.parallel('watch', 'webserver'));
\ No newline at end of file
diff --git a/spectrogram/package.json b/spectrogram/package.json
index 3a98e2a2b..6abdcbf53 100644
--- a/spectrogram/package.json
+++ b/spectrogram/package.json
@@ -1,25 +1,29 @@
 {
-  "version": "0.0.0",
-  "author": "Jeramy Morrill",
+  "version": "0.0.1",
+  "author": "Jeramy Morrill & Alexshcer",
   "devDependencies": {
-    "gulp": "^3.8.11",
-    "gulp-autoprefixer": "^2.1.0",
-    "gulp-browserify": "^0.5.1",
-    "gulp-cache": "^0.2.4",
-    "gulp-clean": "^0.3.1",
-    "gulp-compass": "^2.0.3",
-    "gulp-concat": "^2.4.3",
-    "gulp-copy": "0.0.2",
-    "gulp-iconfont": "^5.0.1",
-    "gulp-iconfont-css": "^2.0.0",
-    "gulp-imagemin": "^2.2.0",
-    "gulp-jade": "^0.11.0",
-    "gulp-livereload": "^3.7.0",
-    "gulp-minify-css": "^0.4.5",
-    "gulp-r": "^1.1.2",
-    "gulp-sass": "^2.1.1",
-    "gulp-uglify": "^1.1.0",
-    "gulp-webserver": "^0.9.0",
-    "jquery": "^2.1.3"
+    "browserify": "^17.0.0",
+    "gulp": "^4.0.2",
+    "gulp-autoprefixer": "^8.0.0",
+    "gulp-cache": "^1.1.3",
+    "gulp-clean-css": "^4.3.0",
+    "gulp-concat": "^2.6.1",
+    "gulp-copy": "^4.0.1",
+    "gulp-iconfont": "^11.0.1",
+    "gulp-iconfont-css": "^3.0.0",
+    "gulp-imagemin": "^7.1.0",
+    "gulp-livereload": "^4.0.2",
+    "gulp-pug": "^5.0.0",
+    "gulp-sass": "^5.1.0",
+    "gulp-uglify": "^3.0.2",
+    "gulp-webserver": "^0.9.1",
+    "jquery": "^3.6.4",
+    "node-sass": "^8.0.0",
+    "sass": "^1.62.1",
+    "vinyl-buffer": "^1.0.1",
+    "vinyl-source-stream": "^2.0.0"
+  },
+  "dependencies": {
+    "lodash": "^4.17.21"
   }
 }
diff --git a/spectrogram/src/sass/fonts/_icons.scss b/spectrogram/src/sass/fonts/_icons.scss
index 231f75574..efb467f85 100644
--- a/spectrogram/src/sass/fonts/_icons.scss
+++ b/spectrogram/src/sass/fonts/_icons.scss
@@ -1,121 +1,121 @@
-@font-face {
-	font-family: "icons";
-	src: url('../bin/fonts/icons/icons.eot');
-	src: url('../bin/fonts/icons/icons.eot?#iefix') format('eot'),
-		url('../bin/fonts/icons/icons.woff') format('woff'),
-		url('../bin/fonts/icons/icons.ttf') format('truetype'),
-		url('../bin/fonts/icons/icons.svg#icons') format('svg');
-}
-
-@mixin icon-styles {
-	font-family: "icons";
-		-webkit-font-smoothing: antialiased;
-		-moz-osx-font-smoothing: grayscale;
-	font-style: normal;
-	font-variant: normal;
-	font-weight: normal;
-	// speak: none; // only necessary if not using the private unicode range (firstGlyph option)
-	text-decoration: none;
-	text-transform: none;
-}
-
-%icon {
-	@include icon-styles;
-}
-
-@function icon-char($filename) {
-	$char: "";
-
-	@if $filename == 808 {
-		$char: "\E001";
-	}
-	@if $filename == bird {
-		$char: "\E002";
-	}
-	@if $filename == computer {
-		$char: "\E003";
-	}
-	@if $filename == draw {
-		$char: "\E004";
-	}
-	@if $filename == flute {
-		$char: "\E005";
-	}
-	@if $filename == guy {
-		$char: "\E006";
-	}
-	@if $filename == harp {
-		$char: "\E007";
-	}
-	@if $filename == mic {
-		$char: "\E008";
-	}
-	@if $filename == piano-01-reverse-01 {
-		$char: "\E009";
-	}
-	@if $filename == piano-01 {
-		$char: "\E00A";
-	}
-	@if $filename == trombone {
-		$char: "\E00B";
-	}
-	@if $filename == wave {
-		$char: "\E00C";
-	}
-	@if $filename == wine {
-		$char: "\E00D";
-	}
-
-	@return $char;
-}
-
-@mixin icon($filename, $insert: before, $extend: true) {
-	&:#{$insert} {
-		@if $extend {
-			@extend %icon;
-		} @else {
-			@include icon-styles;
-		}
-		content: icon-char($filename);
-	}
-}
-
-.icon-808 {
-	@include icon(808);
-}
-.icon-bird {
-	@include icon(bird);
-}
-.icon-computer {
-	@include icon(computer);
-}
-.icon-draw {
-	@include icon(draw);
-}
-.icon-flute {
-	@include icon(flute);
-}
-.icon-guy {
-	@include icon(guy);
-}
-.icon-harp {
-	@include icon(harp);
-}
-.icon-mic {
-	@include icon(mic);
-}
-.icon-piano-01-reverse-01 {
-	@include icon(piano-01-reverse-01);
-}
-.icon-piano-01 {
-	@include icon(piano-01);
-}
-.icon-trombone {
-	@include icon(trombone);
-}
-.icon-wave {
-	@include icon(wave);
-}
-.icon-wine {
-	@include icon(wine);
-}
\ No newline at end of file
+@font-face {
+	font-family: "icons";
+	src: url('../bin/fonts/icons/icons.eot');
+	src: url('../bin/fonts/icons/icons.eot?#iefix') format('eot'),
+		url('../bin/fonts/icons/icons.woff') format('woff'),
+		url('../bin/fonts/icons/icons.ttf') format('truetype'),
+		url('../bin/fonts/icons/icons.svg#icons') format('svg');
+}
+
+@mixin icon-styles {
+	font-family: "icons";
+		-webkit-font-smoothing: antialiased;
+		-moz-osx-font-smoothing: grayscale;
+	font-style: normal;
+	font-variant: normal;
+	font-weight: normal;
+	// speak: none; // only necessary if not using the private unicode range (firstGlyph option)
+	text-decoration: none;
+	text-transform: none;
+}
+
+%icon {
+	@include icon-styles;
+}
+
+@function icon-char($filename) {
+	$char: "";
+
+	@if $filename == 808 {
+		$char: "\E001";
+	}
+	@if $filename == bird {
+		$char: "\E002";
+	}
+	@if $filename == computer {
+		$char: "\E003";
+	}
+	@if $filename == draw {
+		$char: "\E004";
+	}
+	@if $filename == flute {
+		$char: "\E005";
+	}
+	@if $filename == guy {
+		$char: "\E006";
+	}
+	@if $filename == harp {
+		$char: "\E007";
+	}
+	@if $filename == mic {
+		$char: "\E008";
+	}
+	@if $filename == piano-01-reverse-01 {
+		$char: "\E009";
+	}
+	@if $filename == piano-01 {
+		$char: "\E00A";
+	}
+	@if $filename == trombone {
+		$char: "\E00B";
+	}
+	@if $filename == wave {
+		$char: "\E00C";
+	}
+	@if $filename == wine {
+		$char: "\E00D";
+	}
+
+	@return $char;
+}
+
+@mixin icon($filename, $insert: before, $extend: true) {
+	&:#{$insert} {
+		@if $extend {
+			@extend %icon;
+		} @else {
+			@include icon-styles;
+		}
+		content: icon-char($filename);
+	}
+}
+
+.icon-808 {
+	@include icon(808);
+}
+.icon-bird {
+	@include icon(bird);
+}
+.icon-computer {
+	@include icon(computer);
+}
+.icon-draw {
+	@include icon(draw);
+}
+.icon-flute {
+	@include icon(flute);
+}
+.icon-guy {
+	@include icon(guy);
+}
+.icon-harp {
+	@include icon(harp);
+}
+.icon-mic {
+	@include icon(mic);
+}
+.icon-piano-01-reverse-01 {
+	@include icon(piano-01-reverse-01);
+}
+.icon-piano-01 {
+	@include icon(piano-01);
+}
+.icon-trombone {
+	@include icon(trombone);
+}
+.icon-wave {
+	@include icon(wave);
+}
+.icon-wine {
+	@include icon(wine);
+}
\ No newline at end of file