Testing js file handling

gulpfile.js

@@ -1,5 +1,5 @@
 // Setup project
-let config = require('./gulp/config');
+const config = require('./gulp/config');
 
 // Gulp requirements
 const { watch, series, parallel } = require('gulp');
@@ -21,12 +21,12 @@ const sassLint = require('gulp-sass-lint');
 const rename = require('gulp-rename');
 const cleanCss = require('gulp-clean-css');
 const pump = require('pump');
-// const cache = require('gulp-cached');
+const cache = require('gulp-cached');
 // const remember = require('gulp-remember');
 const concat = require('gulp-concat');
 const uglify = require('gulp-uglify');
 const jshint = require('gulp-jshint');
-// const gulpif = require('gulp-if');
+const gulpif = require('gulp-if');
 const changed = require('gulp-changed');
 const merge = require('merge-stream');
 const spritesmith = require('gulp.spritesmith');
@@ -38,17 +38,19 @@ const htmlValidator = require('gulp-w3c-html-validator');
 // Data variables
 const input = {
   screens: config.src + 'screens/**/*.+(njk|html)',
-  templates: config.src + 'templates',
+  templates: config.src + 'templates/',
   data: config.src + 'data/**/*.json',
   style: config.src + 'style/**/*.s+(a|c)ss',
   code: [
+    // config.src + 'code/hippie/config.js',
+    // config.src + 'code/hippie/main.js',
     config.src + 'code/hippie/variables.js',
     config.src + 'code/hippie/functions.js',
     config.src + 'code/hippie/global.js',
-    config.src + 'code/variables.js',
+    // config.src + 'code/variables.js',
-    config.src + 'code/functions.js',
+    // config.src + 'code/functions.js',
-    config.src + 'code/global.js',
+    // config.src + 'code/global.js',
-    config.src + 'code/**/*.js',
+    // config.src + 'code/**/*.js',
     '!' + config.src + 'vendor/**/*'
   ],
   fonts: 'node_modules/@fortawesome/fontawesome-free/webfonts/**/*',
@@ -75,7 +77,7 @@ const output = {
 // Show demo content if configured
 if (config.demo === true) {
   config.index = 'demo.html';
-  config.templateData = config.src + '/templates/demo/data.json';
+  config.templateData = config.src + 'templates/demo/data.json';
 } else {
   config.frontendData = [config.src + 'data/**/*.json', '!' + config.src + 'data/demo.json'];
 }
@@ -104,24 +106,33 @@ function json() {
     .pipe(dest(output.data));
 }
 
-const manageEnvironment = function (environment) {
+function manageEnvironment(environment) {
   environment.addFilter('slug', function (str) {
     return str && str.replace(/\s/g, '-', str).toLowerCase();
   });
 
-  environment.addGlobal('titlePrefix', config.hippie.titlePrefix)
+  environment.addGlobal('hippie', config.hippie);
+  environment.addGlobal('titlePrefix', config.hippie.titlePrefix);
+}
+
+// function getDataForTemplates (file) {
+//   const template = JSON.parse(fs.readFileSync(config.templateData));
+//   const hippie = config.hippie;
+//   // console.log(file.relative);
+//   return { hippie, template };
+// }
+function getDataForTemplates (file) {
+  const data = JSON.parse(fs.readFileSync(config.templateData));
+  return { data };
 }
 
 // Transpile HTML
 function nunjucks() {
   return src(input.screens)
-    .pipe(plumber())
+    // .pipe(plumber())
-    .pipe(data(function () {
+    .pipe(customPlumber())
-      let t = JSON.parse(fs.readFileSync(config.templateData));
+    // TODO only add data to pipe for necessary files
-      let h = config.hippie;
+    .pipe(data(getDataForTemplates))
-      data = { h, t };
-      return data;
-    }))
     .pipe(nunjucksRender({
       path: input.templates,
       envOptions: {
@@ -197,7 +208,7 @@ function code(cb) {
     }),
     plumber(),
     // cache('code'),
-    babel({ presets: ['@babel/env'] }),
+    // babel({ presets: ['@babel/env'] }),
     concat(config.hippie.jsFile + '.js'),
     dest(output.code),
     uglify(),
@@ -307,6 +318,7 @@ exports.validate = series(nunjucks, validate);
 exports.assets = assets;
 exports.build = build;
 exports.dev = dev;
+exports.serve = series(dev, serve);
 exports.default = series(dev, serve, overview);
 
 // function plumbError(errTitle) {
@@ -318,3 +330,13 @@ exports.default = series(dev, serve, overview);
 //     })
 //   });
 // }
+function customPlumber() {
+  return plumber({
+    errorHandler: function (err) {
+      // Logs error in console
+      console.log(err.message);
+      // Ends the current pipe, so Gulp watch doesn't break
+      this.emit('end');
+    }
+  });
+}

source/code/hippie/config.js

@@ -0,0 +1,22 @@
+var hippie = {
+  brand: "|-| | |^ |^ | [- ",
+  screen: {
+    w: Math.max(document.documentElement.offsetWidth, document.documentElement.clientWidth, window.innerWidth, 0),
+    vh: Math.max(document.documentElement.clientHeight, window.innerHeight, 0),
+    dh: Math.max(document.documentElement.offsetHeight, document.documentElement.clientHeight, 0),
+    y: Math.min($(document).scrollTop(), document.documentElement.scrollTop)
+    // hippie.screen.y: document.documentElement.scrollTop
+  },
+  body: {
+    w: Math.max(document.body.offsetWidth, document.body.clientWidth, window.innerWidth, 0),
+    h: Math.max(document.body.offsetHeight, document.body.clientHeight, 0),
+  }
+};
+
+var viewHover = true;
+var basicEase = 600;
+
+var onerowAlphabet = "/\\ ]3 ( |) [- /= (_, |-| | _T /< |_ |\\/| |\\| () |^ ()_ /? _\\~ ~|~ |_| \\/ \\/\\/ >< `/ ~/_ ";
+var onerowDigits = "\'| ^/_ -} +| ;~ (o \"/ {} \"| (\\) ";
+
+export { hippie };

source/code/hippie/global.js

@@ -1,3 +1,3 @@
 // Setup
 // -----------------------------------------------------------------------------
-setup();
+// setup();

source/code/hippie/main.js

@@ -0,0 +1,29 @@
+// Setup
+// -----------------------------------------------------------------------------
+import { hippie } from './config.js';
+
+// This is called everytime
+function setup() {
+  'use strict';
+
+  console.group('Document information');
+  console.info('\n', config.brand, '\n\n');
+  console.info('\n', hippie.brand, '\n\n');
+  console.info('HTML:', hippie.screen, '\nBODY:', hippie.body);
+  console.groupEnd();
+  if (debugOn) {
+    console.group('Debug information');
+    console.dir(hippie);
+    console.groupEnd();
+  }
+
+  // WANNABE MODULE Mouse over effect
+  // With CSS only
+  if ($('#js_mob').length && viewHover) {
+    $('#js_mob').addClass('mouse_over');
+  }
+  // if (viewHover) {
+  // 	$('body').prepend('<div id="js_mob" class="mouse_over"></div>');
+  // }
+  // With JS
+}

source/screens/demo.njk

@@ -60,7 +60,11 @@
 
 {% block script %}
   {{ super() }}
-  <script src="{{ pageBase }}js/{{ hippie.jsFile }}.min.js"></script>
+  <script src="{{ hippie.pageBase }}js/{{ hippie.jsFile }}.min.js"></script>
+  <!-- build:js js/main.concat.min.js -->
+  {# <script src="{{ hippie.pageBase }}js/config.min.js" type="module"></script> #}
+  {# <script src="{{ hippie.pageBase }}js/main.min.js"></script> #}
+  <!-- endbuild -->
   <script>
     // Page specific
     // ------------------------------------------------------------------------------
@@ -68,6 +72,7 @@
     logPerf('BODY        :: Assets loaded, running page specific script...');
     $(document).ready(function () {
       logPerf('EVENT       :: jQuery \'ready\' event fired.');
+      setup();
       logPerf('Application ready.');
     });
   </script>