Static images

.github/CONTRIBUTING.md

@@ -175,6 +175,9 @@ Finally, navigate to [mvp.localtest.me](http://mvp.localtest.me)
  - Close all your tags properly
  - `a` elements with `target="_blank"` should include a `rel="noopener"`
 
+### Images
+You can rebuild all images by running `npm run build:images`
+
 ### CSS
  - Try to use classes instead of IDs unless things are absolutely unique
  - One selector per line

.gitignore

@@ -10,4 +10,3 @@
 /node_modules/
 /scripts/
 /styles/
-/images/

gulpfile.mjs

@@ -3,187 +3,273 @@
  * Does things with things for other built things
  */
 
-import gulp from 'gulp'
-import cache from 'gulp-cached'
-import changed from 'gulp-changed'
-import rev from 'gulp-rev'
-import rename from 'gulp-rename'
-import { spawn } from 'child_process'
+import gulp from "gulp";
+import cache from "gulp-cached";
+import changed from "gulp-changed";
+import rev from "gulp-rev";
+import rename from "gulp-rename";
+import { spawn } from "child_process";
 
-import imagemin from 'gulp-imagemin'
+import imagemin from "gulp-imagemin";
 
-import postcss from 'gulp-postcss'
-import postcssPresetEnv from 'postcss-preset-env'
-import cssnano from 'cssnano'
+import postcss from "gulp-postcss";
+import postcssPresetEnv from "postcss-preset-env";
+import cssnano from "cssnano";
 
-import webpack from 'webpack'
-import webpackConfig from './webpack.config.babel.js'
+import webpack from "webpack";
+import webpackConfig from "./webpack.config.babel.js";
 
 /**
  * png
  * Optimizes png images
  *
  * @returns {Task} - a gulp task for png files
  */
-gulp.task('png', () => {
-    const base = '_images'
-    const src = ['_images/**/*.png']
-    const dest = 'images'
+gulp.task("png", () => {
+  const base = "_images";
+  const src = ["_images/**/*.png"];
+  const dest = "images";
 
-    return gulp.src(src, { base })
+  return gulp
+    .src(src, { base })
     .pipe(changed(dest))
-    .pipe(cache('png'))
+    .pipe(cache("png"))
     .pipe(imagemin())
-    .pipe(gulp.dest(dest))
-})
+    .pipe(gulp.dest(dest));
+});
 
 /**
  * jpg
  * Optimizes jpg images
  *
  * @returns {Task} - a gulp task for jpg images
  */
-gulp.task('jpg', () => {
-    const base = '_images'
-    const src = ['_images/**/*.jpg', '_images/**/*.jpeg']
-    const dest = 'images'
+gulp.task("jpg", () => {
+  const base = "_images";
+  const src = ["_images/**/*.jpg", "_images/**/*.jpeg"];
+  const dest = "images";
 
-    return gulp.src(src, { base })
+  return gulp
+    .src(src, { base })
     .pipe(changed(dest))
-    .pipe(cache('jpg'))
+    .pipe(cache("jpg"))
     .pipe(imagemin())
-    .pipe(gulp.dest(dest))
-})
+    .pipe(gulp.dest(dest));
+});
 
 /**
  * gif
  * Optimizes gif images
  *
  * @returns {Task} - a gulp task for gif images
  */
-gulp.task('gif', () => {
-    const base = '_images'
-    const src = ['_images/**/*.gif', '_images/**/*.gif']
-    const dest = 'images'
+gulp.task("gif", () => {
+  const base = "_images";
+  const src = ["_images/**/*.gif", "_images/**/*.gif"];
+  const dest = "images";
 
-    return gulp.src(src, { base })
+  return gulp
+    .src(src, { base })
     .pipe(changed(dest))
-    .pipe(cache('gif'))
+    .pipe(cache("gif"))
     .pipe(imagemin())
-    .pipe(gulp.dest(dest))
-})
+    .pipe(gulp.dest(dest));
+});
 
 /**
  * svg
  * Optimizes svg image outputs with svgo
  *
  * @returns {Task} - a gulp task for svg optimizes
  */
-gulp.task('svg', () => {
-    const base = '_images'
-    const src = [
-        '_images/**/*.svg',
-
-        '!_images/icons/**/*.svg',
-        '_images/icons/actions/symbolic/appointment-symbolic.svg',
-        '_images/icons/actions/symbolic/edit-clear-all-symbolic.svg',
-        '_images/icons/actions/symbolic/window-maximize-symbolic.svg',
-        '_images/thirdparty-icons/apps/64/io.elementary.code.svg',
-        '_images/icons/categories/64/preferences-desktop-wallpaper.svg',
-        '_images/icons/devices/symbolic/audio-input-microphone-symbolic.svg',
-        '_images/icons/places/128/distributor-logo.svg',
-        '_images/icons/places/64/distributor-logo.svg',
-        '_images/icons/status/symbolic/changes-prevent-symbolic.svg',
-        '_images/icons/status/symbolic/notification-disabled-symbolic.svg',
-        '_images/thirdparty-icons/apps/32/multitasking-view.svg'
-    ]
-    const dest = 'images'
-
-    return gulp.src(src, { "allowEmpty": true,  base })
+gulp.task("svg", () => {
+  const base = "_images";
+  const src = [
+    "_images/**/*.svg",
+
+    "!_images/icons/**/*.svg",
+    "_images/icons/actions/symbolic/appointment-symbolic.svg",
+    "_images/icons/actions/symbolic/edit-clear-all-symbolic.svg",
+    "_images/icons/actions/symbolic/window-maximize-symbolic.svg",
+    "_images/thirdparty-icons/apps/64/io.elementary.code.svg",
+    "_images/icons/categories/64/preferences-desktop-wallpaper.svg",
+    "_images/icons/devices/symbolic/audio-input-microphone-symbolic.svg",
+    "_images/icons/places/128/distributor-logo.svg",
+    "_images/icons/places/64/distributor-logo.svg",
+    "_images/icons/status/symbolic/changes-prevent-symbolic.svg",
+    "_images/icons/status/symbolic/notification-disabled-symbolic.svg",
+    "_images/thirdparty-icons/apps/32/multitasking-view.svg",
+  ];
+  const dest = "images";
+
+  return gulp
+    .src(src, { allowEmpty: true, base })
     .pipe(changed(dest))
-    .pipe(cache('svg'))
+    .pipe(cache("svg"))
     .pipe(imagemin())
-    .pipe(gulp.dest(dest))
-})
+    .pipe(gulp.dest(dest));
+});
 
 /**
  * images
- * Optimizes all images
+ * Optimizes all images, skipping any that already exist in /images/
  *
  * @returns {Task} - a gulp task for all image optimizations
  */
-gulp.task('images', gulp.parallel('png', 'jpg', 'svg', 'gif'))
+gulp.task("images", gulp.parallel("png", "jpg", "svg", "gif"));
+
+/**
+ * png:rebuild
+ * Re-optimizes all png images, overwriting existing outputs
+ *
+ * @returns {Task} - a gulp task for png files
+ */
+gulp.task("png:rebuild", () => {
+  return gulp
+    .src(["_images/**/*.png"], { base: "_images" })
+    .pipe(imagemin())
+    .pipe(gulp.dest("images"));
+});
+
+/**
+ * jpg:rebuild
+ * Re-optimizes all jpg images, overwriting existing outputs
+ *
+ * @returns {Task} - a gulp task for jpg images
+ */
+gulp.task("jpg:rebuild", () => {
+  return gulp
+    .src(["_images/**/*.jpg", "_images/**/*.jpeg"], { base: "_images" })
+    .pipe(imagemin())
+    .pipe(gulp.dest("images"));
+});
+
+/**
+ * gif:rebuild
+ * Re-optimizes all gif images, overwriting existing outputs
+ *
+ * @returns {Task} - a gulp task for gif images
+ */
+gulp.task("gif:rebuild", () => {
+  return gulp
+    .src(["_images/**/*.gif"], { base: "_images" })
+    .pipe(imagemin())
+    .pipe(gulp.dest("images"));
+});
+
+/**
+ * svg:rebuild
+ * Re-optimizes all svg images, overwriting existing outputs
+ *
+ * @returns {Task} - a gulp task for svg images
+ */
+gulp.task("svg:rebuild", () => {
+  const src = [
+    "_images/**/*.svg",
+
+    "!_images/icons/**/*.svg",
+    "_images/icons/actions/symbolic/appointment-symbolic.svg",
+    "_images/icons/actions/symbolic/edit-clear-all-symbolic.svg",
+    "_images/icons/actions/symbolic/window-maximize-symbolic.svg",
+    "_images/thirdparty-icons/apps/64/io.elementary.code.svg",
+    "_images/icons/categories/64/preferences-desktop-wallpaper.svg",
+    "_images/icons/devices/symbolic/audio-input-microphone-symbolic.svg",
+    "_images/icons/places/128/distributor-logo.svg",
+    "_images/icons/places/64/distributor-logo.svg",
+    "_images/icons/status/symbolic/changes-prevent-symbolic.svg",
+    "_images/icons/status/symbolic/notification-disabled-symbolic.svg",
+    "_images/thirdparty-icons/apps/32/multitasking-view.svg",
+  ];
+
+  return gulp
+    .src(src, { allowEmpty: true, base: "_images" })
+    .pipe(imagemin())
+    .pipe(gulp.dest("images"));
+});
+
+/**
+ * images:rebuild
+ * Re-optimizes all images, overwriting existing outputs
+ *
+ * @returns {Task} - a gulp task for rebuilding all image optimizations
+ */
+gulp.task("images:rebuild", gulp.parallel("png:rebuild", "jpg:rebuild", "svg:rebuild", "gif:rebuild"));
 
 /**
  * styles
  * Builds all stylesheets
  *
  * @returns {Task} - a gulp task for building stylesheets
  */
-gulp.task('styles', () => {
-    const base = '_styles'
-    const src = ['_styles/**/*.css']
-    const dest = 'styles'
+gulp.task("styles", () => {
+  const base = "_styles";
+  const src = ["_styles/**/*.css"];
+  const dest = "styles";
 
-    return gulp.src(src, { base })
+  return gulp
+    .src(src, { base })
     .pipe(changed(dest))
-    .pipe(postcss([
-        postcssPresetEnv(),
-        cssnano()
-    ]))
+    .pipe(postcss([postcssPresetEnv(), cssnano()]))
     .pipe(rev())
     .pipe(gulp.dest(dest))
-    .pipe(rename({
-        dirname: "styles" // rename dir in manifest
-    }))
-    .pipe(rev.manifest('manifest.json'))
-    .pipe(gulp.dest(dest))
-})
+    .pipe(
+      rename({
+        dirname: "styles", // rename dir in manifest
+      }),
+    )
+    .pipe(rev.manifest("manifest.json"))
+    .pipe(gulp.dest(dest));
+});
 
 /**
  * scripts
  * Runs webpack to build JavaScript
  */
 
-gulp.task('scripts', () => {
-    return new Promise((resolve, reject) => {
-        webpack(webpackConfig, (err, stats) => {
-            if (err) {
-                console.log(err)
-                reject(err)
-            }
-            console.log(stats.toString({
-                chunks: false,
-                colors: true
-            }))
-            resolve()
-        })
-    })
-})
+gulp.task("scripts", () => {
+  return new Promise((resolve, reject) => {
+    webpack(webpackConfig, (err, stats) => {
+      if (err) {
+        console.log(err);
+        reject(err);
+      }
+      console.log(
+        stats.toString({
+          chunks: false,
+          colors: true,
+        }),
+      );
+      resolve();
+    });
+  });
+});
 
 /**
  * default
  * Builds all asset files
  *
  * @returns {Task} - a gulp task for building
  */
-gulp.task('default', gulp.parallel('images', 'styles', 'scripts'))
+gulp.task("default", gulp.parallel("images", "styles", "scripts"));
 
 /**
  * watch
  * Watches for asset changes and builds what it needs to
  *
  * @returns {Task} - a gulp task for building
  */
-gulp.task('watch', gulp.series('default', function watch () {
-    gulp.watch('_images/**/*.png', gulp.series('png'))
-    gulp.watch('_images/**/*.jpg', gulp.series('jpg'))
-    gulp.watch('_images/**/*.svg', gulp.series('svg'))
-
-    gulp.watch('_styles/**/*.css', gulp.series('styles'))
-    gulp.watch('_scripts/**/*.js', gulp.series('scripts'))
-
-    spawn('php', ['-S', '0.0.0.0:8000', 'router.php'], {
-        stdio: 'inherit'
-    })
-}))
+gulp.task(
+  "watch",
+  gulp.series("default", function watch() {
+    gulp.watch("_images/**/*.png", gulp.series("png"));
+    gulp.watch("_images/**/*.jpg", gulp.series("jpg"));
+    gulp.watch("_images/**/*.svg", gulp.series("svg"));
+
+    gulp.watch("_styles/**/*.css", gulp.series("styles"));
+    gulp.watch("_scripts/**/*.js", gulp.series("scripts"));
+
+    spawn("php", ["-S", "0.0.0.0:8000", "router.php"], {
+      stdio: "inherit",
+    });
+  }),
+);