Remove deprecated warnings from gulp

gulp/tasks/js.js

@@ -1,58 +1,68 @@
+// js.js
 const { src, dest, parallel } = require('gulp');
 const rename = require('gulp-rename');
 const minify = require('gulp-babel-minify');
+const sass = require('sass');
+const through2 = require('through2');
 const config = require('../config');
 
+// Process JavaScript files
 function processFiles() {
 	return src(['src/assets/js/*.js'])
 		.pipe(
-			rename(function (path) {
-				// Returns a completely new object, make sure you return all keys needed!
-				return {
-					dirname: path.dirname,
-					basename: path.basename,
-					extname: '.min.js',
-				};
+			rename((path) => {
+				path.extname = '.min.js';
 			})
 		)
 		.pipe(minify(config.minify))
 		.pipe(dest(config.dirs.dist + '/js'));
 }
 
+// Process vendor JavaScript files
 function copyVendorFiles() {
 	return src(['src/assets/js/vendor/*.js'])
 		.pipe(
-			rename(function (path) {
-				// We don't need to rename if .min is already in filename
-				if (path.basename.endsWith('.min')) {
-					return path;
+			rename((path) => {
+				if (!path.basename.endsWith('.min')) {
+					path.extname = '.min.js';
 				}
-
-				return {
-					dirname: path.dirname,
-					basename: path.basename,
-					extname: '.min.js',
-				};
 			})
 		)
 		.pipe(minify(config.minify))
 		.pipe(dest(config.dirs.dist + '/js'));
 }
 
-/**
- * Build standalone js files.
- *
- * @returns
- */
-function miscJs() {
-	let process = processFiles();
-
-	let copy = copyVendorFiles();
+// Process SCSS files with modern Sass API
+function styles() {
+	return src('src/assets/scss/**/*.scss')
+		.pipe(
+			through2.obj(function (file, _, callback) {
+				if (file.isBuffer()) {
+					try {
+						// Using the modern Sass API
+						const result = sass.compile(file.path, {
+							style: 'compressed',
+						});
+						file.contents = Buffer.from(result.css);
+						file.extname = '.css';
+						this.push(file);
+					} catch (err) {
+						this.emit('error', err);
+					}
+				}
+				callback();
+			})
+		)
+		.pipe(dest(config.dirs.dist + '/css'));
+}
 
-	return copy;
+// Parallel tasks for JavaScript
+function miscJs() {
+	return parallel(processFiles, copyVendorFiles)();
 }
 
 exports.miscJs = miscJs;
-
+exports.styles = styles;
 exports.buildJs = parallel(miscJs);
 exports.js = parallel(miscJs);
+exports.default = parallel(styles, miscJs);

gulp/tasks/styles.js

@@ -1,17 +1,32 @@
 const { src, dest, parallel } = require('gulp');
-const sass = require('gulp-sass')(require('sass'));
+const sass = require('sass');
+const through2 = require('through2');
 const rename = require('gulp-rename');
 const cleancss = require('gulp-clean-css');
 const config = require('../config');
 
-/**
- * Create gulp pipeline for scss/css files.
- *
- * @param {*} sources
- * @returns
- */
 function stylesPipe(sources) {
-	return src(sources).pipe(sass(config.sass)).pipe(cleancss(config.cleancss));
+	return src(sources)
+		.pipe(
+			through2.obj(function (file, _, callback) {
+				if (file.isBuffer()) {
+					try {
+						// Using the modern Sass API
+						const result = sass.compile(file.path, {
+							sourceMap: config.sass.sourceMap,
+							style: config.sass.outputStyle,
+						});
+						file.contents = Buffer.from(result.css);
+						file.extname = '.css';
+						this.push(file);
+					} catch (err) {
+						this.emit('error', err);
+					}
+				}
+				callback();
+			})
+		)
+		.pipe(cleancss(config.cleancss));
 }
 
 function miscStyles() {
@@ -25,6 +40,5 @@ function miscStyles() {
 }
 
 exports.miscStyles = miscStyles;
-
 exports.buildStyles = parallel(miscStyles);
 exports.styles = parallel(miscStyles);

gulp/tasks/watch.js

@@ -3,12 +3,19 @@ const jsTasks = require('./js');
 const stylesTasks = require('./styles');
 
 function miscStyles() {
-	stylesTasks.miscStyles();
-	watch(['src/assets/css/*.scss'], stylesTasks.miscStyles);
+	return stylesTasks.miscStyles();
 }
+
+function watchStyles() {
+	watch(['src/assets/css/*.scss'], miscStyles);
+}
+
 function miscJs() {
-	jsTasks.miscJs();
-	watch(['src/assets/js/*.js', 'src/assets/js/vendor/*.js'], jsTasks.miscJs);
+	return jsTasks.miscJs();
+}
+
+function watchJs() {
+	watch(['src/assets/js/*.js', 'src/assets/js/vendor/*.js'], miscJs);
 }
 
-exports.watch = parallel(miscStyles, miscJs);
+exports.watch = parallel(parallel(miscStyles, watchStyles), parallel(miscJs, watchJs));

package.json

@@ -67,6 +67,7 @@
 		"gulp-minify": "^3.1.0",
 		"gulp-rename": "^2.0.0",
 		"gulp-sass": "^5.1.0",
-		"prettier": "^2.8.8"
+		"prettier": "^2.8.8",
+		"sass": "^1.81.0"
 	}
 }