najmubadr · June 1, 2021 12:17 · Jan 25, 2019 · Jan 25, 2019 · Jan 25, 2019 · Jan 2, 2019
diff --git a/webstoemp-gulpfile.js b/webstoemp-gulpfile.js
@@ -134,3 +134,4 @@ exports.jekyll = jekyll;
 exports.clean = clean;
 exports.build = build;
 exports.watch = watch;
+exports.default = build;
diff --git a/webstoemp-gulpfile.js b/webstoemp-gulpfile.js
@@ -88,13 +88,15 @@ function scriptsLint() {
 
 // Transpile, concatenate and minify scripts
 function scripts() {
-  return gulp
+  return (
+    gulp
       .src(["./assets/js/**/*"])
       .pipe(plumber())
       .pipe(webpackstream(webpackconfig, webpack))
       // folder only, filename is specified in webpack config
       .pipe(gulp.dest("./_site/assets/js/"))
-      .pipe(browsersync.stream());
+      .pipe(browsersync.stream())
+  );
 }
 
 // Jekyll
@@ -119,18 +121,16 @@ function watchFiles() {
   gulp.watch("./assets/img/**/*", images);
 }
 
-// Tasks
-gulp.task("images", images);
-gulp.task("css", css);
-gulp.task("js", gulp.series(scriptsLint, scripts));
-gulp.task("jekyll", jekyll);
-gulp.task("clean", clean);
-
-// build
-gulp.task(
-  "build",
-  gulp.series(clean, gulp.parallel(css, images, jekyll, "js"))
-);
+// define complex tasks
+const js = gulp.series(scriptsLint, scripts);
+const build = gulp.series(clean, gulp.parallel(css, images, jekyll, js));
+const watch = gulp.parallel(watchFiles, browserSync);
 
-// watch
-gulp.task("watch", gulp.parallel(watchFiles, browserSync));
+// export tasks
+exports.images = images;
+exports.css = css;
+exports.js = js;
+exports.jekyll = jekyll;
+exports.clean = clean;
+exports.build = build;
+exports.watch = watch;
diff --git a/webstoemp-gulpfile.js b/webstoemp-gulpfile.js
@@ -14,7 +14,6 @@ const plumber = require("gulp-plumber");
 const postcss = require("gulp-postcss");
 const rename = require("gulp-rename");
 const sass = require("gulp-sass");
-const uglify = require("gulp-uglify");
 const webpack = require("webpack");
 const webpackconfig = require("./webpack.config.js");
 const webpackstream = require("webpack-stream");
@@ -47,10 +46,19 @@ function images() {
     .src("./assets/img/**/*")
     .pipe(newer("./_site/assets/img"))
     .pipe(
-      imagemin({
-        progressive: true,
-        svgoPlugins: [{ removeViewBox: false }]
-      })
+      imagemin([
+        imagemin.gifsicle({ interlaced: true }),
+        imagemin.jpegtran({ progressive: true }),
+        imagemin.optipng({ optimizationLevel: 5 }),
+        imagemin.svgo({
+          plugins: [
+            {
+              removeViewBox: false,
+              collapseGroups: true
+            }
+          ]
+        })
+      ])
     )
     .pipe(gulp.dest("./_site/assets/img"));
 }
@@ -80,16 +88,13 @@ function scriptsLint() {
 
 // Transpile, concatenate and minify scripts
 function scripts() {
-  return (
-    gulp
+  return gulp
       .src(["./assets/js/**/*"])
       .pipe(plumber())
-      .pipe(webpackstream(webpackconfig), webpack)
-      .pipe(uglify())
+      .pipe(webpackstream(webpackconfig, webpack))
       // folder only, filename is specified in webpack config
       .pipe(gulp.dest("./_site/assets/js/"))
-      .pipe(browsersync.stream())
-  );
+      .pipe(browsersync.stream());
 }
 
 // Jekyll

diff --git a/webstoemp-gulpfile.js b/webstoemp-gulpfile.js
@@ -60,7 +60,7 @@ function css() {
   return gulp
     .src("./assets/scss/**/*.scss")
     .pipe(plumber())
-    .pipe(sass({ style: "expanded" }))
+    .pipe(sass({ outputStyle: "expanded" }))
     .pipe(gulp.dest("./_site/assets/css/"))
     .pipe(rename({ suffix: ".min" }))
     .pipe(postcss([autoprefixer(), cssnano()]))

diff --git a/webstoemp-gulpfile.js b/webstoemp-gulpfile.js
@@ -0,0 +1,131 @@
+"use strict";
+
+// Load plugins
+const autoprefixer = require("autoprefixer");
+const browsersync = require("browser-sync").create();
+const cp = require("child_process");
+const cssnano = require("cssnano");
+const del = require("del");
+const eslint = require("gulp-eslint");
+const gulp = require("gulp");
+const imagemin = require("gulp-imagemin");
+const newer = require("gulp-newer");
+const plumber = require("gulp-plumber");
+const postcss = require("gulp-postcss");
+const rename = require("gulp-rename");
+const sass = require("gulp-sass");
+const uglify = require("gulp-uglify");
+const webpack = require("webpack");
+const webpackconfig = require("./webpack.config.js");
+const webpackstream = require("webpack-stream");
+
+// BrowserSync
+function browserSync(done) {
+  browsersync.init({
+    server: {
+      baseDir: "./_site/"
+    },
+    port: 3000
+  });
+  done();
+}
+
+// BrowserSync Reload
+function browserSyncReload(done) {
+  browsersync.reload();
+  done();
+}
+
+// Clean assets
+function clean() {
+  return del(["./_site/assets/"]);
+}
+
+// Optimize Images
+function images() {
+  return gulp
+    .src("./assets/img/**/*")
+    .pipe(newer("./_site/assets/img"))
+    .pipe(
+      imagemin({
+        progressive: true,
+        svgoPlugins: [{ removeViewBox: false }]
+      })
+    )
+    .pipe(gulp.dest("./_site/assets/img"));
+}
+
+// CSS task
+function css() {
+  return gulp
+    .src("./assets/scss/**/*.scss")
+    .pipe(plumber())
+    .pipe(sass({ style: "expanded" }))
+    .pipe(gulp.dest("./_site/assets/css/"))
+    .pipe(rename({ suffix: ".min" }))
+    .pipe(postcss([autoprefixer(), cssnano()]))
+    .pipe(gulp.dest("./_site/assets/css/"))
+    .pipe(browsersync.stream());
+}
+
+// Lint scripts
+function scriptsLint() {
+  return gulp
+    .src(["./assets/js/**/*", "./gulpfile.js"])
+    .pipe(plumber())
+    .pipe(eslint())
+    .pipe(eslint.format())
+    .pipe(eslint.failAfterError());
+}
+
+// Transpile, concatenate and minify scripts
+function scripts() {
+  return (
+    gulp
+      .src(["./assets/js/**/*"])
+      .pipe(plumber())
+      .pipe(webpackstream(webpackconfig), webpack)
+      .pipe(uglify())
+      // folder only, filename is specified in webpack config
+      .pipe(gulp.dest("./_site/assets/js/"))
+      .pipe(browsersync.stream())
+  );
+}
+
+// Jekyll
+function jekyll() {
+  return cp.spawn("bundle", ["exec", "jekyll", "build"], { stdio: "inherit" });
+}
+
+// Watch files
+function watchFiles() {
+  gulp.watch("./assets/scss/**/*", css);
+  gulp.watch("./assets/js/**/*", gulp.series(scriptsLint, scripts));
+  gulp.watch(
+    [
+      "./_includes/**/*",
+      "./_layouts/**/*",
+      "./_pages/**/*",
+      "./_posts/**/*",
+      "./_projects/**/*"
+    ],
+    gulp.series(jekyll, browserSyncReload)
+  );
+  gulp.watch("./assets/img/**/*", images);
+}
+
+// Tasks
+gulp.task("images", images);
+gulp.task("css", css);
+gulp.task("js", gulp.series(scriptsLint, scripts));
+gulp.task("jekyll", jekyll);
+gulp.task("clean", clean);
+
+// build
+gulp.task(
+  "build",
+  gulp.series(clean, gulp.parallel(css, images, jekyll, "js"))
+);
+
+// watch
+gulp.task("watch", gulp.parallel(watchFiles, browserSync));