Initial Testing of new Structure

.eslintrc

@@ -0,0 +1,16 @@
+{
+  "env": {
+    "browser": true,
+    "node": true,
+    "es6": true
+  },
+  "parserOptions": {
+    "sourceType": "module"
+  },
+  "extends": "eslint:recommended",
+  "rules": {
+    "quotes": ["error", "double"],
+    "semi": ["error", "always"],
+    "no-console": "off"
+  }
+}

.gitignore

@@ -2,11 +2,8 @@
 *.map
 *.bak
 
-temp.css-e
+# mac items
 .DS_Store
-.stylelintrc
-.browserlistrc
-*.json
-modernizr-custom.js
-modernizr.js
-gulpfile.js
+
+# node items
+node_modules/

gulp-tasks/browsersync.js

@@ -0,0 +1,31 @@
+// packages
+const browsersync = require("browser-sync").create();
+
+// BrowserSync
+function init(done) {
+  browsersync.init({
+    server: {
+      baseDir: "./dist/"
+    },
+    files: [
+      "./dist/css/main.min.css",
+      "./dist/js/main.bundle.js",
+      "./dist/**/*.{html, xml}"
+    ],
+    port: 3000,
+    open: false
+  });
+  done();
+}
+
+// BrowserSync Reload
+function reload(done) {
+  browsersync.reload();
+  done();
+}
+
+// exports
+module.exports = {
+  init: init,
+  reload: reload
+};

gulp-tasks/clean.js

@@ -0,0 +1,12 @@
+// packages
+const del = require("del");
+
+// Clean
+function cleanDist() {
+  return del(["./dist/"]);
+}
+
+// exports
+module.exports = {
+  dist: cleanDist
+};

gulp-tasks/copy.js

@@ -0,0 +1,56 @@
+// packages
+const fs = require("fs");
+const glob = require("glob");
+const path = require("path");
+
+// config
+const assetsDirs = [
+  {
+    src: "./src/assets/img/",
+    dist: "./dist/img/"
+  }
+];
+
+// make sure paths do not end with slash
+function sanitizePath(filepath) {
+  let sanitizedFilepath = filepath;
+  if (filepath.slice(-1) === "/") {
+    sanitizedFilepath = filepath.slice(0, -1);
+  }
+  return sanitizedFilepath;
+}
+
+// copy assets
+function copyAssets(done) {
+  assetsDirs.forEach(dir => {
+    // src and dist
+    let sourceDir = sanitizePath(dir.src);
+    let distDir = sanitizePath(dir.dist);
+
+    // glob all files
+    let files = glob.sync(`${sourceDir}/**/*`, { nodir: true });
+
+    // copy each file to dist dir
+    files.forEach(function(file) {
+      let srcFile = file;
+      let distFile = srcFile.replace(sourceDir, distDir);
+      let distDirname = path.dirname(distFile);
+
+      if (!fs.existsSync(distDirname)) {
+        fs.mkdirSync(distDirname, { recursive: true });
+      }
+
+      if (!fs.existsSync(distFile)) {
+        fs.copyFile(srcFile, distFile, err => {
+          if (err) throw err;
+        });
+      }
+    });
+  });
+  done();
+}
+
+// exports
+module.exports = {
+  assets: copyAssets
+};

gulp-tasks/images.js

@@ -0,0 +1,88 @@
+// packages
+const fs = require("fs");
+const glob = require("glob");
+const path = require("path");
+const sharp = require("sharp");
+const imagemin = require("gulp-imagemin");
+const gulp = require("gulp");
+
+// specify transforms
+const transforms = [
+  {
+    src: "./src/assets/img/blogposts/*",
+    dist: "./dist/img/blogposts/_1024x576/",
+    options: {
+      width: 1024,
+      height: 576,
+      fit: "cover"
+    }
+  },
+  {
+    src: "./src/assets/img/blogposts/*",
+    dist: "./dist/img/blogposts/_600x600/",
+    options: {
+      width: 600,
+      height: 600,
+      fit: "cover"
+    }
+  },
+  {
+    src: "./src/assets/img/projects/*",
+    dist: "./dist/img/projects/_800x600/",
+    options: {
+      width: 800,
+      height: 600,
+      fit: "cover"
+    }
+  }
+];
+
+// resize images
+function resizeImages(done) {
+  transforms.forEach(function(transform) {
+    // if folder does not exist create it with all above folders
+    if (!fs.existsSync(transform.dist)) {
+      fs.mkdirSync(transform.dist, { recursive: true }, err => {
+        if (err) throw err;
+      });
+    }
+
+    // glob all files
+    let files = glob.sync(transform.src);
+
+    // for each file, apply transforms and save to file
+    files.forEach(function(file) {
+      let filename = path.basename(file);
+      sharp(file)
+        .resize(transform.options)
+        .toFile(`${transform.dist}/${filename}`)
+        .catch(err => {
+          console.log(err);
+        });
+    });
+  });
+  done();
+}
+
+// optimize images in place
+function optimiseImages() {
+  return gulp
+    .src("./src/assets/img/**/*", { base: "./src/assets/img" })
+    .pipe(
+      imagemin([
+        imagemin.gifsicle({ interlaced: true }),
+        imagemin.jpegtran({ progressive: true }),
+        imagemin.optipng({ optimizationLevel: 5 }),
+        imagemin.svgo({
+          plugins: [{ removeViewBox: false }, { collapseGroups: true }]
+        })
+      ])
+    )
+    .pipe(gulp.dest("./src/assets/img/"));
+}
+
+// exports (Common JS)
+module.exports = {
+  resize: resizeImages,
+  optimise: optimiseImages
+};

gulp-tasks/scripts.js

@@ -0,0 +1,41 @@
+const gulp = require("gulp");
+
+// packages
+const eslint = require("gulp-eslint");
+const webpack = require("webpack");
+const webpackconfig = require("../webpack.config");
+const webpackstream = require("webpack-stream");
+
+// Lint scripts
+function scriptsLint() {
+  return gulp
+    .src(
+        [
+        "./src/assets/js/modules/**/*",
+        "./gulpfile.js"
+        ],
+        { allowEmpty: true })
+    .pipe(eslint())
+    .pipe(eslint.format())
+    .pipe(eslint.failAfterError());
+}
+
+// Transpile, concatenate and minify scripts
+function scriptsBuild() {
+  return (
+    gulp
+      .src(
+        ["./src/assets/js/main.js"],
+        { allowEmpty: true }
+          )
+      .pipe(webpackstream(webpackconfig, webpack))
+      // folder only, filename is specified in webpack
+      .pipe(gulp.dest("./dist/js/"))
+  );
+}
+
+// exports (Common JS)
+module.exports = {
+  lint: scriptsLint,
+  build: scriptsBuild
+};

gulp-tasks/styles.js

@@ -0,0 +1,21 @@
+// packages
+const autoprefixer = require("autoprefixer");
+const cssnano = require("cssnano");
+const gulp = require("gulp");
+const postcss = require("gulp-postcss");
+const rename = require("gulp-rename");
+
+// CSS task
+function stylesBuild() {
+  return gulp
+    .src("./src/assets/scss/**/*.css")
+    .pipe(gulp.dest("./dist/css/"))
+    .pipe(rename({ suffix: ".min" }))
+    .pipe(postcss([autoprefixer(), cssnano()]))
+    .pipe(gulp.dest("./dist/css/"));
+}
+
+// exports
+module.exports = {
+  build: stylesBuild
+};