[FEATURE] add image task

core/logger.js

@@ -3,6 +3,7 @@ const timestamp = require('time-stamp');
 const chalk = require('chalk');
 const notifier = require('node-notifier');
 const path = require('path');
+const browserSync = require('browser-sync');
 
 /**
  * Logging-Module for the SGC
@@ -72,4 +73,13 @@ module.exports = class Logger {
 			}
 		);
 	}
+
+	/**
+	 * Displays a BS notification
+	 * 
+	 * @param {String} _message The message to display
+	 */
+	static displayBrowserSyncNotification(_message) {
+		browserSync.notify(`<b>SGC:</b> ${_message}`);
+	}
 }

core/settings.js

@@ -23,6 +23,7 @@ class Settings {
 			js: () => {return require('./tasks/js')},
 			watch: () => {return require('./tasks/watch')},
 			server: () => {return require('./tasks/server')},
+			images: () => {return require('./tasks/images')},
 			default: () => {return require('./tasks/default')}
 		};
 	}

core/tasks/css.js

@@ -90,8 +90,9 @@ module.exports = class Css extends Task {
 	 * @param {String} _output The path to the output file
 	 */
 	async _compile(_input, _output) {
+		this._logger.displayBrowserSyncNotification('Compiling Sass – hang in there...');
 		const render = util.promisify(sass.render);
-		let result;
+		// let result;
 		const sourceMapPath = this._getSourceMapsPath(_output);
 		// try {
 		// 	result = await render({
@@ -106,25 +107,49 @@ module.exports = class Css extends Task {
 		// 	this._logger.error(_error.stack);
 		// }
 
-		let css = await postcss([
-			require('@csstools/postcss-sass')(/* node-sass options */)
-		], {
-			syntax: scss
-		}).process(
-			fs.readFileSync(_input, 'utf-8')
-		);
+		// let css = await postcss([
+		// 	require('@csstools/postcss-sass')(/* node-sass options */)
+		// ], {
+		// 	syntax: scss
+		// }).process(
+		// 	fs.readFileSync(_input, 'utf-8')
+		// );
 
 		// let css = result;
 
-		try {
-			await this._writeFile(_output, css.css);
-			await this._writeFile(sourceMapPath, css.map);
-		} catch (_error) {
-			return this._logger.error(_error.stack);
+		// try {
+		// 	await this._writeFile(_output, css.css);
+		// 	await this._writeFile(sourceMapPath, css.map);
+		// } catch (_error) {
+		// 	return this._logger.error(_error.stack);
+		// }
+
+		let compiledSass = await render({
+			file: _input,
+			outFile: _output,
+			outputStyle: 'expanded',
+			sourceMap: true,
+			sourceMapEmbed: false,
+			precision: 8
+		});
+
+		let postProcessedCss = await postcss([
+			autoprefixer
+		]).process(compiledSass.css, {
+			from: _input,
+			to: _output,
+			map: {
+				prev: compiledSass.map.toString(),
+				inline: false,
+				annotation: path.join(path.relative(path.dirname(_output), path.dirname(sourceMapPath)), path.basename(sourceMapPath))
 			}
+		});
+
+		await this._writeFile(_output, postProcessedCss.css);
+		await this._writeFile(sourceMapPath, postProcessedCss.map);
 	
-		this._logger.success(`Written ${chalk.white(path.basename(_output))}`)
-		this._logger.success(`Written ${chalk.white(path.basename(sourceMapPath))}`)
+		// this._logger.success(`Written ${chalk.white(path.basename(_output))}`)
+		// this._logger.success(`Written ${chalk.white(path.basename(sourceMapPath))}`)
 	}
 
 	/**
@@ -132,7 +157,7 @@ module.exports = class Css extends Task {
 	 * 
 	 * @param {String} _input The path to the input file
 	 */
-	async _qa(_input) {
+	async _qa(_input) {return;
 		let file = fs.readFileSync(_input, "utf8");
 		postcss([
 			stylelint({

core/tasks/images.js

+const Task = require('../task');
+const globby = require('globby');
+const fs = require('fs');
+const imagemin = require('imagemin');
+const imageminJpegtran = require('imagemin-jpegtran');
+const imageminPngquant = require('imagemin-pngquant');
+const imageminGifsicle = require('imagemin-gifsicle');
+const imageminSvgo = require('imagemin-svgo');
+const prettyBytes = require('pretty-bytes');
+const chalk = require('chalk');
+
+/**
+ * This task handles image optimization
+ */
+module.exports = class Watch extends Task {
+
+	/**
+	 * Runner function
+	 */
+	async run() {
+		const imagesPath = this._getFullPath(this._config.directories.images);
+		const files = await globby([`${imagesPath}/**/*.{png,jpg,gif,svg}`]);
+		files.forEach(async _image => {
+			let buffer = fs.readFileSync(_image);
+			let result = await imagemin.buffer(buffer, {
+				plugins: [
+					imageminJpegtran(),
+					imageminPngquant({quality: '65-80'}),
+					imageminGifsicle(),
+					imageminSvgo()
+				]
+			});
+			let info;
+			if (buffer.length === result.length) {
+				info = chalk.dim('(already optimized)');
+			} else {
+				let saved = buffer.length - result.length;
+				info = `(saved ${prettyBytes(saved)} ~ ${Math.round((saved / buffer.length) * 100)}%)`;
+			}
+			let message = `${chalk.white(_image.replace(`${imagesPath}/`, ''))} ${chalk.magenta(`${info}`)}`;
+			fs.writeFileSync(_image, result);
+			this._logger.success(message);
+		});
+	}
+}

core/tasks/js.js

@@ -88,6 +88,7 @@ module.exports = class Js extends Task {
 	 */
 	async _compile(_input, _output) {
 		try {
+			this._logger.displayBrowserSyncNotification('Compiling JS – hang in there...');
 			let sourceMapPath = this._getSourceMapsPath(_output);
 			let relativeSourceMapPath = path.join(path.dirname(sourceMapPath), path.basename(sourceMapPath));
 			browserify(_input, {

package.json

@@ -28,6 +28,11 @@
     "exorcist": "^1.0.1",
     "freedesktop-notifications": "^1.2.3",
     "globby": "^8.0.1",
+    "imagemin": "^6.0.0",
+    "imagemin-gifsicle": "^5.2.0",
+    "imagemin-jpegtran": "^5.0.2",
+    "imagemin-pngquant": "^6.0.0",
+    "imagemin-svgo": "^7.0.0",
     "log-symbols": "^2.2.0",
     "mkdirp": "^0.5.1",
     "node-notifier": "^5.2.1",
@@ -36,6 +41,7 @@
     "postcss": "^7.0.2",
     "postcss-reporter": "^6.0.0",
     "postcss-scss": "^2.0.0",
+    "pretty-bytes": "^5.1.0",
     "stylelint": "^9.5.0",
     "stylelint-config-sgalinski": "^1.2.0",
     "time-stamp": "^2.1.0",