gulpfile.mjs

/**
 * gulpfile.mjs
 * 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 imagemin from "gulp-imagemin";

import postcss from "gulp-postcss";
import postcssPresetEnv from "postcss-preset-env";
import cssnano from "cssnano";

import webpack from "webpack";
import webpackConfig from "./webpack.config.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";

  return gulp
    .src(src, { base })
    .pipe(changed(dest))
    .pipe(cache("png"))
    .pipe(imagemin())
    .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";

  return gulp
    .src(src, { base })
    .pipe(changed(dest))
    .pipe(cache("jpg"))
    .pipe(imagemin())
    .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";

  return gulp
    .src(src, { base })
    .pipe(changed(dest))
    .pipe(cache("gif"))
    .pipe(imagemin())
    .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 })
    .pipe(changed(dest))
    .pipe(cache("svg"))
    .pipe(imagemin())
    .pipe(gulp.dest(dest));
});

/**
 * 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"));

/**
 * 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";

  return gulp
    .src(src, { base })
    .pipe(changed(dest))
    .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));
});

/**
 * 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();
    });
  });
});

/**
 * default
 * Builds all asset files
 *
 * @returns {Task} - a gulp task for building
 */
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",
    });
  }),
);