reafactor Gulp config, fix minifying images and CSS

Signed-off-by: Jakub Sokołowski <jakub@status.im>
2026-01-07 22:03:55 -05:00 · 2022-01-11 20:56:55 +01:00
parent 57225b2c60
commit cd851ae586
6 changed files with 167 additions and 80 deletions
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -75,6 +75,7 @@ GEM
    webrick (1.7.0)

 PLATFORMS
+  ruby
  x86_64-darwin-20

 DEPENDENCIES
--- a/_config.yml
+++ b/_config.yml
@@ -25,6 +25,7 @@ exclude:
  - package-lock.json
  - README.md
  - src
+  - assets
  - tailwind.config.js
  - netlify.toml
  - vendor
--- a/_includes/scripts.html
+++ b/_includes/scripts.html
@@ -1,2 +1,2 @@
-<script src="{{ '/assets/js/main.js' | relative_url }}"></script>
-<script src="{{ '/assets/js/smooth-scroll.js' | relative_url }}"></script>
+<script src="{{ '/assets/js/main.min.js' | relative_url }}"></script>
+<script src="{{ '/assets/js/smooth-scroll.min.js' | relative_url }}"></script>
--- a/gulpfile.babel.js
+++ b/gulpfile.babel.js
@@ -1,97 +1,99 @@
-import autoprefixer from "autoprefixer";
-import browserSync from "browser-sync";
-import spawn from "cross-spawn";
-import cssnano from "cssnano";
-import { dest, series, src, task, watch } from "gulp";
-import postcss from "gulp-postcss";
-import atimport from "postcss-import";
-import imagemin from "gulp-imagemin";
-import tailwindcss from "tailwindcss";
+import { dest, series, parallel, src, watch as gwatch } from 'gulp'
+import autoprefixer from 'autoprefixer'
+import browserSync from 'browser-sync'
+import spawn from 'cross-spawn'
+import cssnano from 'cssnano'
+import postcss from 'gulp-postcss'
+import atimport from 'postcss-import'
+import imagemin from 'gulp-imagemin'
+import minify from 'gulp-minify'
+import tailwindcss from 'tailwindcss'

-const SITE_ROOT = "./_site";
-const POST_BUILD_STYLESHEET = `${SITE_ROOT}/assets/css/`;
-const PRE_BUILD_STYLESHEET = "./assets/css/style.css";
-const IMAGES = "./assets/img";
-const IMAGES_MINIMIZED = `${SITE_ROOT}/assets/`;
-const TAILWIND_CONFIG = "./tailwind.config.js";
+const SITE_ROOT = './_site'
+const POST_BUILD_STYLESHEET = `${SITE_ROOT}/assets/css/`
+const PRE_BUILD_STYLESHEET = './assets/css/style.css'
+const IMAGES = './assets/img/**/*'
+const IMAGES_MINIMIZED = `${SITE_ROOT}/assets/img/`
+const TAILWIND_CONFIG = './tailwind.config.js'

 // Fix for Windows compatibility
-const jekyll = process.platform === "win32" ? "jekyll.bat" : "jekyll";
+const jekyll = process.platform === 'win32' ? 'jekyll.bat' : 'jekyll'

-const isDevelopmentBuild = process.env.NODE_ENV === "development";
+const isDevelopmentBuild = process.env.NODE_ENV === 'development'

-task("buildJekyll", () => {
-  browserSync.notify("Building Jekyll site...");
-
-  const args = ["exec", jekyll, "build"];
+const content = () => {
+  browserSync.notify('Building Jekyll site...')

+  const args = ['exec', jekyll, 'build']
  if (isDevelopmentBuild) {
-    args.push("--incremental");
+    args.push('--incremental')
  }

-  return spawn("bundle", args, { stdio: "inherit" });
-});
+  return spawn('bundle', args, { stdio: 'inherit' })
+}

-task("processStyles", () => {
-  browserSync.notify("Compiling styles...");
+const scripts = () =>
+  src('./assets/js/*')
+    .pipe(minify({ext:{min:'.min.js' }, mangle: true}))
+    .pipe(dest(`${SITE_ROOT}/assets/js/`))
+    .pipe(browserSync.stream())

-  return src(PRE_BUILD_STYLESHEET)
+const styles = () =>
+  src(PRE_BUILD_STYLESHEET)
    .pipe(
-      postcss([
-        atimport(),
-        tailwindcss(TAILWIND_CONFIG),
-        ...(isDevelopmentBuild ? [] : [autoprefixer(), cssnano()]),
-      ])
-    )
-    .pipe(dest(POST_BUILD_STYLESHEET));
-});
+        postcss([
+          atimport(),
+          tailwindcss(TAILWIND_CONFIG),
+          ...(isDevelopmentBuild ? [] : [autoprefixer(), cssnano()]),
+        ])
+      )
+    .pipe(dest(POST_BUILD_STYLESHEET))
+    .pipe(browserSync.stream())

-task("cname", () => {
-  return src('assets/CNAME').pipe(dest(SITE_ROOT));
-});
+const cname = () =>
+  src('assets/CNAME').pipe(dest(SITE_ROOT))

-task("images", () => {
-  return src(IMAGES)
-    .pipe(
-      imagemin([
-        imagemin.gifsicle({ interlaced: true }),
-        imagemin.optipng({ optimizationLevel: 3 }),
-        imagemin.svgo(),
-      ])
-    )
+const images = () =>
+  src(IMAGES)
+    .pipe(imagemin([
+      imagemin.gifsicle({ interlaced: true }),
+      imagemin.optipng({ optimizationLevel: 3 }),
+      imagemin.svgo(),
+    ]))
+    .pipe(dest(IMAGES_MINIMIZED))
+    .pipe(browserSync.stream())

-    .pipe(dest(IMAGES_MINIMIZED));
-});
-
-task("startServer", () => {
+const server = () =>
  browserSync.init({
-    files: [SITE_ROOT + "/**"],
-    open: "local",
+    files: [SITE_ROOT + '/**'],
+    open: 'local',
    port: 4000,
    server: {
      baseDir: SITE_ROOT,
      serveStaticOptions: {
-        extensions: ["html"],
+        extensions: ['html'],
      },
    },
-  });
+  })

-  watch(
-    [
-      "**/*.css",
-      "**/*.html",
-      "**/*.js",
-      "**/*.md",
-      "**/*.markdown",
-      "!_site/**/*",
-      "!node_modules/**/*",
-    ],
-    { interval: 500 },
-    buildSite
-  );
-});
+const watch = () => {
+  gwatch(['_authors/*', '_data/*', '_posts/*', '_layouts/*', '_includes/*'], content)
+  gwatch('**/*.js', scripts)
+  gwatch(PRE_BUILD_STYLESHEET, styles)
+  gwatch(IMAGES, images)
+  //'!_site/**/*',
+  //'!node_modules/**/*',
+}

-const buildSite = series("buildJekyll", "processStyles", "images", "cname");
+const build = series(content, scripts, styles, images, cname)

-exports.serve = series(buildSite, "startServer");
-exports.default = series(buildSite);
+exports.content = content
+exports.scripts = scripts
+exports.styles = styles
+exports.images = images
+exports.cname = cname
+exports.watch = watch
+exports.server = server
+exports.build = build
+exports.devel = series(build, parallel(server, watch))
+exports.default = exports.build
--- a/package.json
+++ b/package.json
@@ -12,8 +12,10 @@
    "cross-env": "7.0.3",
    "cross-spawn": "7.0.3",
    "cssnano": "5.0.7",
+    "gh-pages": "^3.2.3",
    "gulp": "4.0.2",
    "gulp-imagemin": "^7.1.0",
+    "gulp-minify": "^3.1.0",
    "gulp-postcss": "9.0.0",
    "postcss": "8.3.6",
    "postcss-import": "14.0.2",
@@ -27,8 +29,5 @@
    "start": "yarn run dev",
    "clean": "git clean -fdx",
    "deploy": "node scripts/deploy.js"
-  },
-  "dependencies": {
-    "gh-pages": "^3.2.3"
  }
 }
--- a/yarn.lock
+++ b/yarn.lock
@@ -309,6 +309,13 @@ ansi-colors@^1.0.1:
  dependencies:
    ansi-wrap "^0.1.0"

+ansi-cyan@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-cyan/-/ansi-cyan-0.1.1.tgz#538ae528af8982f28ae30d86f2f17456d2609873"
+  integrity sha1-U4rlKK+JgvKK4w2G8vF0VtJgmHM=
+  dependencies:
+    ansi-wrap "0.1.0"
+
 ansi-gray@^0.1.1:
  version "0.1.1"
  resolved "https://registry.yarnpkg.com/ansi-gray/-/ansi-gray-0.1.1.tgz#2962cf54ec9792c48510a3deb524436861ef7251"
@@ -316,6 +323,13 @@ ansi-gray@^0.1.1:
  dependencies:
    ansi-wrap "0.1.0"

+ansi-red@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-red/-/ansi-red-0.1.1.tgz#8c638f9d1080800a353c9c28c8a81ca4705d946c"
+  integrity sha1-jGOPnRCAgAo1PJwoyKgcpHBdlGw=
+  dependencies:
+    ansi-wrap "0.1.0"
+
 ansi-regex@^2.0.0:
  version "2.1.1"
  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df"
@@ -402,6 +416,14 @@ argparse@^1.0.7:
  dependencies:
    sprintf-js "~1.0.2"

+arr-diff@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-1.1.0.tgz#687c32758163588fef7de7b36fabe495eb1a399a"
+  integrity sha1-aHwydYFjWI/vfeezb6vklesaOZo=
+  dependencies:
+    arr-flatten "^1.0.1"
+    array-slice "^0.2.3"
+
 arr-diff@^4.0.0:
  version "4.0.0"
  resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-4.0.0.tgz#d6461074febfec71e7e15235761a329a5dc7c520"
@@ -426,6 +448,11 @@ arr-map@^2.0.0, arr-map@^2.0.2:
  dependencies:
    make-iterator "^1.0.0"

+arr-union@^2.0.1:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/arr-union/-/arr-union-2.1.0.tgz#20f9eab5ec70f5c7d215b1077b1c39161d292c7d"
+  integrity sha1-IPnqtexw9cfSFbEHexw5Fh0pLH0=
+
 arr-union@^3.1.0:
  version "3.1.0"
  resolved "https://registry.yarnpkg.com/arr-union/-/arr-union-3.1.0.tgz#e39b09aea9def866a8f206e288af63919bae39c4"
@@ -456,6 +483,11 @@ array-last@^1.1.1:
  dependencies:
    is-number "^4.0.0"

+array-slice@^0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/array-slice/-/array-slice-0.2.3.tgz#dd3cfb80ed7973a75117cdac69b0b99ec86186f5"
+  integrity sha1-3Tz7gO15c6dRF82sabC5nshhhvU=
+
 array-slice@^1.0.0:
  version "1.1.0"
  resolved "https://registry.yarnpkg.com/array-slice/-/array-slice-1.1.0.tgz#e368ea15f89bc7069f7ffb89aec3a6c7d4ac22d4"
@@ -1734,7 +1766,7 @@ colorette@^1.2.2, colorette@^1.3.0:
  resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.3.0.tgz#ff45d2f0edb244069d3b772adeb04fed38d0a0af"
  integrity sha512-ecORCqbSFP7Wm8Y6lyqMJjexBQqXSF7SSeaTyGGphogUjBlFP9m9o08wy86HL2uB7fMTxtOUzLMk7ogKcxMg1w==

-commander@^2.18.0, commander@^2.2.0, commander@^2.8.1:
+commander@^2.18.0, commander@^2.19.0, commander@^2.2.0, commander@^2.8.1:
  version "2.20.3"
  resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
  integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
@@ -2682,6 +2714,13 @@ ext@^1.1.2:
  dependencies:
    type "^2.5.0"

+extend-shallow@^1.1.2:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-1.1.4.tgz#19d6bf94dfc09d76ba711f39b872d21ff4dd9071"
+  integrity sha1-Gda/lN/AnXa6cR85uHLSH/TdkHE=
+  dependencies:
+    kind-of "^1.1.0"
+
 extend-shallow@^2.0.1:
  version "2.0.1"
  resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-2.0.1.tgz#51af7d614ad9a9f610ea1bafbb989d6b1c56890f"
@@ -3347,6 +3386,18 @@ gulp-imagemin@^7.1.0:
    imagemin-optipng "^7.0.0"
    imagemin-svgo "^7.0.0"

+gulp-minify@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/gulp-minify/-/gulp-minify-3.1.0.tgz#9ed9e09f6bfca64e99cd0427bc8e90d44e736770"
+  integrity sha512-ixF41aYg+NQikI8hpoHdEclYcQkbGdXQu1CBdHaU7Epg8H6e8d2jWXw1+rBPgYwl/XpKgjHj7NI6gkhoSNSSAg==
+  dependencies:
+    ansi-colors "^1.0.1"
+    minimatch "^3.0.2"
+    plugin-error "^0.1.2"
+    terser "^3.7.6"
+    through2 "^2.0.3"
+    vinyl "^2.1.0"
+
 gulp-postcss@9.0.0:
  version "9.0.0"
  resolved "https://registry.yarnpkg.com/gulp-postcss/-/gulp-postcss-9.0.0.tgz#2ade18809ab475dae743a88bd6501af0b04ee54e"
@@ -4211,6 +4262,11 @@ keyv@3.0.0:
  dependencies:
    json-buffer "3.0.0"

+kind-of@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-1.1.0.tgz#140a3d2d41a36d2efcfa9377b62c24f8495a5c44"
+  integrity sha1-FAo9LUGjbS78+pN3tiwk+ElaXEQ=
+
 kind-of@^3.0.2, kind-of@^3.0.3, kind-of@^3.2.0:
  version "3.2.2"
  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.2.2.tgz#31ea21a734bab9bbb0f32466d893aea51e4a3c64"
@@ -5191,6 +5247,17 @@ pkg-dir@^4.1.0:
  dependencies:
    find-up "^4.0.0"

+plugin-error@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/plugin-error/-/plugin-error-0.1.2.tgz#3b9bb3335ccf00f425e07437e19276967da47ace"
+  integrity sha1-O5uzM1zPAPQl4HQ34ZJ2ln2kes4=
+  dependencies:
+    ansi-cyan "^0.1.1"
+    ansi-red "^0.1.1"
+    arr-diff "^1.0.1"
+    arr-union "^2.0.1"
+    extend-shallow "^1.1.2"
+
 plugin-error@^1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/plugin-error/-/plugin-error-1.0.1.tgz#77016bd8919d0ac377fdcdd0322328953ca5781c"
@@ -6230,6 +6297,14 @@ source-map-support@^0.4.15:
  dependencies:
    source-map "^0.5.6"

+source-map-support@~0.5.10:
+  version "0.5.21"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.21.tgz#04fe7c7f9e1ed2d662233c28cb2b35b9f63f6e4f"
+  integrity sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==
+  dependencies:
+    buffer-from "^1.0.0"
+    source-map "^0.6.0"
+
 source-map-url@^0.4.0:
  version "0.4.1"
  resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.1.tgz#0af66605a745a5a2f91cf1bbf8a7afbc283dec56"
@@ -6240,7 +6315,7 @@ source-map@^0.5.0, source-map@^0.5.1, source-map@^0.5.6, source-map@^0.5.7:
  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
  integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=

-source-map@^0.6.1:
+source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1:
  version "0.6.1"
  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
@@ -6581,6 +6656,15 @@ tempfile@^2.0.0:
    temp-dir "^1.0.0"
    uuid "^3.0.1"

+terser@^3.7.6:
+  version "3.17.0"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-3.17.0.tgz#f88ffbeda0deb5637f9d24b0da66f4e15ab10cb2"
+  integrity sha512-/FQzzPJmCpjAH9Xvk2paiWrFq+5M6aVOf+2KRbwhByISDX/EujxsK+BAvrhb6H+2rtrLCHK9N01wO014vrIwVQ==
+  dependencies:
+    commander "^2.19.0"
+    source-map "~0.6.1"
+    source-map-support "~0.5.10"
+
 tfunk@^4.0.0:
  version "4.0.0"
  resolved "https://registry.yarnpkg.com/tfunk/-/tfunk-4.0.0.tgz#de9399feaf2060901d590b7faad80fcd5443077e"
@@ -6977,7 +7061,7 @@ vinyl-sourcemaps-apply@^0.2.1:
  dependencies:
    source-map "^0.5.1"

-vinyl@^2.0.0:
+vinyl@^2.0.0, vinyl@^2.1.0:
  version "2.2.1"
  resolved "https://registry.yarnpkg.com/vinyl/-/vinyl-2.2.1.tgz#23cfb8bbab5ece3803aa2c0a1eb28af7cbba1974"
  integrity sha512-LII3bXRFBZLlezoG5FfZVcXflZgWP/4dCwKtxd5ky9+LOtM4CS3bIRQsmR1KMnMW07jpE8fqR2lcxPZ+8sJIcw==