Commit cc84b82d authored by Philipp Nowinski's avatar Philipp Nowinski
Browse files

[FEATURE] add image task

parent c69a482f
...@@ -3,6 +3,7 @@ const timestamp = require('time-stamp'); ...@@ -3,6 +3,7 @@ const timestamp = require('time-stamp');
const chalk = require('chalk'); const chalk = require('chalk');
const notifier = require('node-notifier'); const notifier = require('node-notifier');
const path = require('path'); const path = require('path');
const browserSync = require('browser-sync');
/** /**
* Logging-Module for the SGC * Logging-Module for the SGC
...@@ -72,4 +73,13 @@ module.exports = class Logger { ...@@ -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}`);
}
} }
...@@ -23,6 +23,7 @@ class Settings { ...@@ -23,6 +23,7 @@ class Settings {
js: () => {return require('./tasks/js')}, js: () => {return require('./tasks/js')},
watch: () => {return require('./tasks/watch')}, watch: () => {return require('./tasks/watch')},
server: () => {return require('./tasks/server')}, server: () => {return require('./tasks/server')},
images: () => {return require('./tasks/images')},
default: () => {return require('./tasks/default')} default: () => {return require('./tasks/default')}
}; };
} }
......
...@@ -90,8 +90,9 @@ module.exports = class Css extends Task { ...@@ -90,8 +90,9 @@ module.exports = class Css extends Task {
* @param {String} _output The path to the output file * @param {String} _output The path to the output file
*/ */
async _compile(_input, _output) { async _compile(_input, _output) {
this._logger.displayBrowserSyncNotification('Compiling Sass – hang in there...');
const render = util.promisify(sass.render); const render = util.promisify(sass.render);
let result; // let result;
const sourceMapPath = this._getSourceMapsPath(_output); const sourceMapPath = this._getSourceMapsPath(_output);
// try { // try {
// result = await render({ // result = await render({
...@@ -106,25 +107,49 @@ module.exports = class Css extends Task { ...@@ -106,25 +107,49 @@ module.exports = class Css extends Task {
// this._logger.error(_error.stack); // this._logger.error(_error.stack);
// } // }
let css = await postcss([ // let css = await postcss([
require('@csstools/postcss-sass')(/* node-sass options */) // require('@csstools/postcss-sass')(/* node-sass options */)
], { // ], {
syntax: scss // syntax: scss
}).process( // }).process(
fs.readFileSync(_input, 'utf-8') // fs.readFileSync(_input, 'utf-8')
); // );
// let css = result; // let css = result;
try { // try {
await this._writeFile(_output, css.css); // await this._writeFile(_output, css.css);
await this._writeFile(sourceMapPath, css.map); // await this._writeFile(sourceMapPath, css.map);
} catch (_error) { // } catch (_error) {
return this._logger.error(_error.stack); // 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))
}
});
this._logger.success(`Written ${chalk.white(path.basename(_output))}`) await this._writeFile(_output, postProcessedCss.css);
this._logger.success(`Written ${chalk.white(path.basename(sourceMapPath))}`) await this._writeFile(sourceMapPath, postProcessedCss.map);
// 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 { ...@@ -132,7 +157,7 @@ module.exports = class Css extends Task {
* *
* @param {String} _input The path to the input file * @param {String} _input The path to the input file
*/ */
async _qa(_input) { async _qa(_input) {return;
let file = fs.readFileSync(_input, "utf8"); let file = fs.readFileSync(_input, "utf8");
postcss([ postcss([
stylelint({ stylelint({
......
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);
});
}
}
...@@ -88,6 +88,7 @@ module.exports = class Js extends Task { ...@@ -88,6 +88,7 @@ module.exports = class Js extends Task {
*/ */
async _compile(_input, _output) { async _compile(_input, _output) {
try { try {
this._logger.displayBrowserSyncNotification('Compiling JS – hang in there...');
let sourceMapPath = this._getSourceMapsPath(_output); let sourceMapPath = this._getSourceMapsPath(_output);
let relativeSourceMapPath = path.join(path.dirname(sourceMapPath), path.basename(sourceMapPath)); let relativeSourceMapPath = path.join(path.dirname(sourceMapPath), path.basename(sourceMapPath));
browserify(_input, { browserify(_input, {
......
This diff is collapsed.
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment