refactor: cleanup and restructure gulp tasks (#32)

.gitignore

@@ -10,11 +10,10 @@ exampleSite/public/
 CHANGELOG.md
 
 # auto-generated files
-layouts/partials/icons-svg-symbols.html
-assets/*.css
-static/*.css
-!static/custom.css
-static/js/*.js
+layouts/partials/svg-icon-symbols.html
+static/*.min.css
+static/*.min.css.map
+static/js/
 static/favicon/
 static/fonts/GeekblogIcons.*
 resources/

.npmrc

@@ -0,0 +1,2 @@
+loglevel=error
+fund=false

gulpfile.js

@@ -1,36 +1,51 @@
+const devBuild = !(
+  (process.env.NODE_ENV || "prod").trim().toLowerCase() === "prod"
+);
+
 const gulp = require("gulp");
 const rename = require("gulp-rename");
-const sass = require("gulp-sass");
+const { sass } = require("@mr-hope/gulp-sass");
 const cleanCSS = require("gulp-clean-css");
 const autoprefixer = require("gulp-autoprefixer");
 const iconfont = require("gulp-iconfont");
-const clean = require("gulp-clean");
-
+const uglify = require("gulp-uglify");
+const sourcemaps = require("gulp-sourcemaps");
 const realFavicon = require("gulp-real-favicon");
-const path = require("path");
-const fs = require("fs");
-
 const svgSprite = require("gulp-svg-sprite");
 const rev = require("gulp-rev");
+const replace = require("gulp-replace");
 
-var CSSDEST = "assets/";
-var FAVICON_DATA_FILE = "build/faviconData.json";
+const path = require("path");
+const fs = require("fs");
+const del = require("del");
+const through = require("through2");
+
+var BUILD = "build";
+var CSS_BUILD = BUILD + "/assets";
+var JS_BUILD = BUILD + "/assets/js";
+var FAVICON_DATA_FILE = BUILD + "/faviconData.json";
 var TIMESTAMP = Math.round(Date.now() / 1000);
 
+function noop() {
+  return through.obj();
+}
+
 gulp.task("sass", function () {
   return gulp
     .src("src/sass/{main,print,mobile}.scss")
-    .pipe(sass({ errLogToConsole: true }))
+    .pipe(devBuild ? sourcemaps.init() : noop())
+    .pipe(sass().on("error", sass.logError))
     .pipe(cleanCSS({ format: "beautify" }))
     .pipe(
       autoprefixer({
         cascade: false,
       })
     )
-    .pipe(gulp.dest(CSSDEST))
+    .pipe(gulp.dest(CSS_BUILD))
     .pipe(cleanCSS())
     .pipe(rename({ extname: ".min.css" }))
-    .pipe(gulp.dest(CSSDEST));
+    .pipe(devBuild ? sourcemaps.write(".") : noop())
+    .pipe(gulp.dest(CSS_BUILD));
 });
 
 gulp.task("favicon-generate", function (done) {
@@ -122,12 +137,12 @@ gulp.task("svg-sprite", function () {
         padding: 5,
         box: "content",
       },
-      dest: "build/intermediate-svg",
+      dest: BUILD + "/intermediate-svg",
     },
     svg: {
       xmlDeclaration: false,
       rootAttributes: {
-        style: "position: absolute; width: 0; height: 0; overflow: hidden;",
+        class: "svg-sprite",
       },
     },
     mode: {
@@ -150,8 +165,7 @@ gulp.task("iconfont", function () {
   var lastUnicode = 0xea01;
   var files = fs.readdirSync("src/iconfont");
 
-  // Filter files with containing unicode value
-  // and set last unicode
+  // Filter files with containing unicode value and set last unicode
   files.forEach(function (file) {
     var basename = path.basename(file);
     var matches = basename.match(/^(?:((?:u[0-9a-f]{4,6},?)+)\-)?(.+)\.svg$/i);
@@ -183,12 +197,32 @@ gulp.task("iconfont", function () {
     .pipe(gulp.dest("static/fonts/"));
 });
 
+gulp.task("js", function () {
+  return gulp
+    .src(["src/js/*.js"])
+    .pipe(devBuild ? sourcemaps.init() : noop())
+    .pipe(uglify())
+    .pipe(rename({ extname: ".min.js" }))
+    .pipe(devBuild ? sourcemaps.write(".") : noop())
+    .pipe(gulp.dest(JS_BUILD));
+});
+
+gulp.task("asset-sync", function () {
+  return gulp
+    .src([
+      "node_modules/clipboard/dist/clipboard.min.js",
+      "node_modules/flexsearch/dist/flexsearch.min.js",
+      "node_modules/mermaid/dist/mermaid.min.js",
+    ])
+    .pipe(replace(/\/\/# sourceMappingURL=.+$/, ""))
+    .pipe(gulp.dest(JS_BUILD));
+});
+
 gulp.task("asset-rev", function () {
   return gulp
-    .src(["assets/*.min.css", "assets/js/*.min.js"], {
-      base: "static",
+    .src([CSS_BUILD + "/*.min.css", JS_BUILD + "/*.min.js"], {
+      base: BUILD + "/assets",
     })
-    .pipe(gulp.dest("build/assets"))
     .pipe(rev())
     .pipe(gulp.dest("static"))
     .pipe(
@@ -201,22 +235,52 @@ gulp.task("asset-rev", function () {
     .pipe(gulp.dest("data"));
 });
 
-gulp.task("asset-rm", function () {
+gulp.task("asset-map", function () {
   return gulp
-    .src(["build/assets", "static/js/*-*.js", "static/*-*.css"], {
-      read: false,
-      allowEmpty: true,
+    .src([CSS_BUILD + "/*.min.css.map", JS_BUILD + "/*.min.js.map"], {
+      base: BUILD + "/assets",
     })
-    .pipe(clean());
+    .pipe(gulp.dest("static"));
 });
 
-gulp.task("asset", gulp.series("asset-rm", "asset-rev"));
+gulp.task("clean", function () {
+  return del([
+    BUILD,
+    "layouts/partials/svg-icon-symbols.svg",
+    "static/js/",
+    "static/favicon/",
+    "static/*.min.css",
+    "static/*.css.map",
+    "data/assets.json",
+    "resources",
+  ]);
+});
+
+/* Task series */
+
+gulp.task("asset", gulp.series("asset-sync", "asset-rev"));
+
+gulp.task("svg", gulp.series("svg-sprite"));
 
 gulp.task(
   "default",
-  gulp.series("sass", "svg-sprite", "iconfont", "favicon-generate", "asset")
+  gulp.series([
+    devBuild ? [] : "clean",
+    "sass",
+    "js",
+    "asset",
+    devBuild ? "asset-map" : [],
+    "svg",
+    "iconfont",
+    "favicon-generate",
+  ])
 );
 
-gulp.task("devel", function () {
-  gulp.watch("src/sass/**/*.*css", gulp.series("sass", "asset"));
+gulp.task("watch", function () {
+  gulp.series("default")();
+  gulp.watch(
+    "src/sass/**/*.*css",
+    gulp.series("sass", "asset-rev", "asset-map")
+  );
+  gulp.watch("src/js/*.js", gulp.series("js", "asset-rev", "asset-map"));
 });

package.json

@@ -4,7 +4,8 @@
   "description": "Hugo theme made for blogs",
   "main": "gulpfile.js",
   "scripts": {
-    "gulp": "gulp"
+    "gulp": "gulp",
+    "server": "hugo server  -D -F -s exampleSite/"
   },
   "repository": {
     "type": "git",
@@ -12,22 +13,28 @@
   },
   "author": "Robert Kaussow",
   "license": "MIT",
-  "dependencies": {},
+  "dependencies": {
+    "clipboard": "2.0.8",
+    "flexsearch": "0.6.32",
+    "mermaid": "8.10.1"
+  },
   "devDependencies": {
+    "@mr-hope/gulp-sass": "2.0.0",
+    "del": "6.0.0",
     "gulp": "4.0.2",
     "gulp-autoprefixer": "7.0.1",
-    "gulp-clean": "0.4.0",
     "gulp-clean-css": "4.3.0",
-    "gulp-concat": "2.6.1",
     "gulp-iconfont": "11.0.0",
     "gulp-real-favicon": "0.3.2",
     "gulp-rename": "2.0.0",
+    "gulp-replace": "1.1.3",
     "gulp-rev": "9.0.0",
-    "gulp-sass": "4.1.0",
+    "gulp-sourcemaps": "3.0.0",
     "gulp-svg-sprite": "1.5.0",
+    "gulp-uglify": "3.0.2",
     "prettier": "2.3.0",
     "prettier-plugin-go-template": "0.0.10",
-    "run-sequence": "2.2.1"
+    "through2": "4.0.2"
   },
   "browserslist": [
     "last 2 version",

src/sass/_utils.scss

@@ -53,3 +53,10 @@
 .hidden {
   display: none;
 }
+
+.svg-sprite {
+  position: absolute;
+  width: 0;
+  height: 0;
+  overflow: hidden;
+}