Merge pull request #17 from jermbo/dev

Dev

Author: jermbo

Generic_Starter_Gulp4/example.env

@@ -1 +1,2 @@
 ENV=development
+PORT=5000

Generic_Starter_Gulp4/gulp-config.js

@@ -1,24 +1,46 @@
 const yargs = require("yargs");
-const env = process.env.NODE_ENV;
-const port = process.env.PORT || 3000;
 
-const isDev = env === "development";
-const isProd = env === "production";
-const isTest = env === "test";
+const env = process.env.ENV;
 
+const srcPath = "./src";
+const buildPath = "./build";
+const tmpPath = "./_tmp";
 const siteInstanceName = "./";
 
 module.exports = {
+  srcPath,
+  buildPath,
+  tmpPath,
+  siteInstanceName,
   env,
-  isDev,
-  isProd,
-  isTest,
-  input: "./src",
-  output: "./build",
-  imageSizes: [400, 900, 1300],
+  html: {
+    source: `${srcPath}/**/*.{html,htm,php,cshtml}`,
+    build: `${buildPath}/`,
+  },
+  styles: {
+    source: `${srcPath}/sass/**/*.{sass,scss,css}`,
+    build: `${buildPath}/styles/`,
+    options: {
+      sass: {outputStyle: "compressed"},
+      autoPrefixer: { browsers: ["last 4 versions"], grid: false },
+    },
+  },
+  scripts: {
+    source: `${srcPath}/scripts/**/*.js`,
+    build: `${buildPath}/scripts/`,
+  },
+  images: {
+    source: `${srcPath}/images/**/*`,
+    build: `${buildPath}/images/`,
+    options: {
+      sizes: [400, 900, 1300]
+    },
+  },
+
   devURL: yargs.url ? yargs.url : siteInstanceName,
-  browserSync: {
-    port: port,
+
+  browserSyncSettings: {
+    port: yargs.port ? yargs.port : process.env.PORT || 3000,
     ghostMode: {
       clicks: true,
       location: true,

Generic_Starter_Gulp4/gulp-env.js

@@ -1,16 +1,16 @@
 const browserSync = require("browser-sync").create();
-const config = require("./_config");
+const {siteInstanceName, browserSyncSettings, buildPath} = require("./_config");
 
-function startServer(next){
-  if( config.devURL == "./") {
-    config.browserSync["server"] = {
-      baseDir: config.output
+function startServer(next) {
+  if( siteInstanceName == "./") {
+    browserSyncSettings["server"] = {
+      baseDir: buildPath
     };
   } else {
-    config.browserSync["proxy"] = config.devURL;
+    browserSyncSettings["proxy"] = siteInstanceName;
   }
 
-  browserSync.init(null, config.browserSync);
+  browserSync.init(null, browserSyncSettings);
 
   next();
 }

Generic_Starter_Gulp4/gulp/_config.js

@@ -1,11 +1,18 @@
-const config = require("./_config");
+const { buildPath, tmpPath } = require("./_config");
 const del = require("del");
 
-const clean = () => {
+function cleanAll() {
   return del([
-    config.output,
-    "./_tmp"
+    buildPath,
+    tmpPath
   ]);
-};
+}
 
-module.exports = clean;
+function cleanTmp() {
+  return del([
+    tmpPath
+  ]);
+}
+
+exports.cleanTmp = cleanTmp;
+exports.cleanAll = cleanAll;

Generic_Starter_Gulp4/gulp/browser-sync.js

@@ -1,17 +1,17 @@
 const gulp = require("gulp");
 const $ = require("gulp-load-plugins")({ lazy: true });
 
-const { input, output } = require("./_config");
+const { html } = require("./_config");
 
-const src = `${input}/**/*.{html,htm,php,cshtml}`;
-const dest = `${output}`;
+const src = html.source;
+const build = html.build;
 
-function html() {
+function compileHTML() {
   return gulp
     .src(src)
-    .pipe($.changed(dest))
-    .pipe(gulp.dest(dest));
+    .pipe($.changed(build))
+    .pipe(gulp.dest(build));
 }
 
 exports.src = src;
-exports.default = html;
+exports.default = compileHTML;

Generic_Starter_Gulp4/gulp/clean.js

@@ -2,33 +2,34 @@ const gulp = require("gulp");
 const $ = require("gulp-load-plugins")({ lazy: true });
 const resizer = require("@zellwk/resize-images");
 
+const { images, tmpPath } = require("./_config");
 
-const {input, output, imageSizes } = require("./_config");
+const src = images.source;
+const build = images.build;
+const imageSizes = images.options.sizes;
 
-const imageInput = `${input}/images/**/*`;
-const tmpOutput = "./_tmp/minified";
-const tmpOutput2 = "./_tmp/resized";
-const imageOutput = `${output}/images`;
+const tmpOutput = `${tmpPath}/minified`;
+const tmpOutput2 = `${tmpPath}/resized`;
 
 function jpegToWebp () {
   return gulp
-    .src(`${imageInput}.{jpeg,jpg}`)
+    .src(`${src}.{jpeg,jpg}`)
     .pipe($.newer({ dest: tmpOutput, ext: ".webp" }))
     .pipe($.webp({ quality: 80 }))
     .pipe(gulp.dest(tmpOutput));
 }
 
 function pngToWebp() {
   return gulp
-    .src(`${imageInput}.png`)
+    .src(`${src}.png`)
     .pipe($.newer({ dest: tmpOutput, ext: ".webp" }))
     .pipe($.webp({ lossless: true }))
     .pipe(gulp.dest(tmpOutput));
 }
 
 function minifyImages() {
   return gulp
-    .src(`${imageInput}.{png,jpg,jpeg,gif}`)
+    .src(`${src}.{png,jpg,jpeg,gif}`)
     .pipe($.newer(tmpOutput))
     .pipe($.imagemin([
       $.imagemin.jpegtran({ progressive: true }),
@@ -48,20 +49,20 @@ function resizeImages() {
 function copyImagesToDist() {
   return gulp
     .src(`${tmpOutput2}/**/*`)
-    .pipe(gulp.dest(imageOutput));
+    .pipe(gulp.dest(build));
 }
 
 function copySvgToDist() {
   return gulp
-    .src(`${imageInput}/**/*.svg`)
-    .pipe(gulp.dest(imageOutput));
+    .src(`${src}/**/*.svg`)
+    .pipe(gulp.dest(build));
 }
 
-const images = gulp.series(
+const compileImages = gulp.series(
   gulp.parallel(jpegToWebp, pngToWebp, minifyImages),
   gulp.parallel(resizeImages),
   gulp.parallel(copyImagesToDist, copySvgToDist)
 );
 
-exports.src = imageInput;
-exports.default = images;
+exports.src = src;
+exports.default = compileImages;

Generic_Starter_Gulp4/gulp/html.js

@@ -0,0 +1,21 @@
+const gulp = require("gulp");
+const $ = require("gulp-load-plugins")({ lazy: true });
+
+const { styles } = require("./_config");
+
+const src = styles.source;
+const build = styles.build;
+
+function compileStyles() {
+  return gulp
+    .src(src)
+    .pipe($.sourcemaps.init())
+    .pipe($.sass(styles.options.sass))
+    .pipe($.autoprefixer(styles.options.autoPrefixer))
+    .pipe($.sourcemaps.write("./"))
+    .pipe($.size({title: "Styles"}))
+    .pipe(gulp.dest(build));
+}
+
+exports.src = src;
+exports.default = compileStyles;