[Feature] Introducing image compression using imagemin (#654)

* Introduce imagemin for compressing images

* Replace original images with the optimized ones

* Add imagemin-svgo to dependencies

* Remove console statement, replace let with const

* Replace let with const

* Add --skip-image-compression

* Run Prettier

Author: ahmadalfy

docs/api-commands.md

@@ -53,11 +53,11 @@ Docusaurus provides some default mappings to allow you to run commands following
 
 ## Reference
 
-### `docusaurus-build`
+### `docusaurus-build [--skip-image-compression]`
 
 Alias: `build`.
 
-Generates the static website, applying translations if necessary. Useful for building the website prior to deployment.
+Generates the static website, applying translations if necessary. Useful for building the website prior to deployment. By default Docusaurus will attempt to compress your images unless you provided the `--skip-image-compression` flag.
 
 See also [`docusaurus-start`](api-commands.md#docusaurus-start-port-number).
 

lib/server/generate.js

@@ -29,6 +29,14 @@ async function execute() {
   const sep = path.sep;
   const escapeStringRegexp = require('escape-string-regexp');
   const {renderToStaticMarkupWithDoctype} = require('./renderUtils');
+  const commander = require('commander');
+  const imagemin = require('imagemin');
+  const imageminJpegtran = require('imagemin-jpegtran');
+  const imageminOptipng = require('imagemin-optipng');
+  const imageminSvgo = require('imagemin-svgo');
+  const imageminGifsicle = require('imagemin-gifsicle');
+
+  commander.option('--skip-image-compression').parse(process.argv);
 
   // create the folder path for a file if it does not exist, then write the file
   function writeFileAndCreateFolder(file, content) {
@@ -399,9 +407,29 @@ async function execute() {
       }
 
       fs.writeFileSync(mainCss, cssContent);
+    } else if (
+      normalizedFile.match(/\.png$|.jpg$|.svg$|.gif$/) &&
+      !commander.skipImageCompression
+    ) {
+      const parts = normalizedFile.split(sep + 'static' + sep);
+      const targetDirectory = join(
+        buildDir,
+        parts[1].substring(0, parts[1].lastIndexOf(sep))
+      );
+      mkdirp.sync(path.dirname(targetDirectory));
+      imagemin([normalizedFile], targetDirectory, {
+        use: [
+          imageminOptipng(),
+          imageminJpegtran(),
+          imageminSvgo({
+            plugins: [{removeViewBox: false}],
+          }),
+          imageminGifsicle(),
+        ],
+      });
     } else if (!fs.lstatSync(normalizedFile).isDirectory()) {
-      let parts = normalizedFile.split(sep + 'static' + sep);
-      let targetFile = join(buildDir, parts[1]);
+      const parts = normalizedFile.split(sep + 'static' + sep);
+      const targetFile = join(buildDir, parts[1]);
       mkdirp.sync(path.dirname(targetFile));
       fs.copySync(normalizedFile, targetFile);
     }