Testing js file handling
This commit is contained in:
parent
731c19dd61
commit
dd5ff43e16
5 changed files with 99 additions and 21 deletions
60
gulpfile.js
60
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/functions.js',
|
||||
config.src + 'code/global.js',
|
||||
config.src + 'code/**/*.js',
|
||||
// config.src + 'code/variables.js',
|
||||
// config.src + 'code/functions.js',
|
||||
// config.src + 'code/global.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(data(function () {
|
||||
let t = JSON.parse(fs.readFileSync(config.templateData));
|
||||
let h = config.hippie;
|
||||
data = { h, t };
|
||||
return data;
|
||||
}))
|
||||
// .pipe(plumber())
|
||||
.pipe(customPlumber())
|
||||
// TODO only add data to pipe for necessary files
|
||||
.pipe(data(getDataForTemplates))
|
||||
.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');
|
||||
}
|
||||
});
|
||||
}
|
||||
22
source/code/hippie/config.js
Normal file
22
source/code/hippie/config.js
Normal file
|
|
@ -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 };
|
||||
|
|
@ -1,3 +1,3 @@
|
|||
// Setup
|
||||
// -----------------------------------------------------------------------------
|
||||
setup();
|
||||
// setup();
|
||||
|
|
|
|||
29
source/code/hippie/main.js
Normal file
29
source/code/hippie/main.js
Normal file
|
|
@ -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
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue