You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
130 lines
3.3 KiB
130 lines
3.3 KiB
#!/usr/bin/env node
|
|
|
|
import express from 'express';
|
|
import {create} from 'express-handlebars';
|
|
import fs from 'fs-extra';
|
|
import browserSync from 'browser-sync';
|
|
import config from 'config';
|
|
import gulp from 'gulp';
|
|
import babel from "gulp-babel";
|
|
import uglify from "gulp-uglify";
|
|
import rename from "gulp-rename";
|
|
import dartSass from 'sass';
|
|
import gulpSass from 'gulp-sass';
|
|
import sourcemaps from "gulp-sourcemaps";
|
|
|
|
/**
|
|
* Constants
|
|
*/
|
|
|
|
const isDev = config.get('mode') === 'development';
|
|
const projectDir = isDev ? '.' : './node_modules/axe-web-component';
|
|
console.log('Development Mode:', isDev);
|
|
|
|
const sass = gulpSass(dartSass);
|
|
|
|
/**
|
|
* Init server
|
|
*/
|
|
|
|
const app = express();
|
|
|
|
const hbs = create({
|
|
extname: '.hbs', defaultLayout: false,
|
|
partialsDir: ['.'],
|
|
});
|
|
|
|
app.engine('.hbs', hbs.engine);
|
|
app.set('view engine', '.hbs');
|
|
app.set('views', projectDir + '/layouts');
|
|
|
|
app.get('/', async (req, res) => {
|
|
const jsonFileName = (req.query.data) ? req.query.data : 'default';
|
|
const data = await fs.readJson(`./data/${jsonFileName}.json`);
|
|
|
|
res.render('page-container', data);
|
|
});
|
|
|
|
app.use(express.static('src'));
|
|
|
|
const listener = app.listen(0, () => {
|
|
const PORT = listener.address().port;
|
|
|
|
console.log(`The web server has started on port ${PORT}`);
|
|
|
|
const bs = browserSync.create();
|
|
|
|
gulp.watch(['src/**/*.js', 'src/**/*.mjs', '!src/**/*.min.js'],
|
|
{delay: 400},
|
|
gulp.series([buildScriptFiles, function (cb) {
|
|
browserSyncReload(bs, 'js', 'Script Files Change');
|
|
return cb();
|
|
}]));
|
|
|
|
gulp.watch('src/**/*.scss',
|
|
{delay: 400},
|
|
gulp.series([buildStyleFiles, function (cb) {
|
|
browserSyncReload(bs, 'css', 'Style Files Change');
|
|
return cb();
|
|
}]));
|
|
|
|
|
|
// bs.watch("src/**/*.js", function (event, file) {});
|
|
// bs.watch("src/**/*.css", function (event, file) {});
|
|
|
|
bs.watch("src/**/*.hbs", function (event, file) {
|
|
browserSyncReload(bs, '', 'Template File Change: ' + file)
|
|
});
|
|
|
|
bs.init({
|
|
proxy: `http://localhost:${PORT}`,
|
|
});
|
|
});
|
|
|
|
/**
|
|
* Functions
|
|
*/
|
|
|
|
function browserSyncReload(bs, extension = '', message = '') {
|
|
if (isDev) {
|
|
// console.log(event, file);
|
|
console.log(message);
|
|
}
|
|
|
|
if (extension) {
|
|
extension = "*." + extension;
|
|
}
|
|
|
|
bs.reload(extension);
|
|
}
|
|
|
|
function buildScriptFiles() {
|
|
return gulp.src(['src/**/*.js', 'src/**/*.mjs', '!src/**/*.min.js'])
|
|
.pipe(sourcemaps.init({}))
|
|
.pipe(babel())
|
|
.pipe(gulp.src('vendor/*.js'))
|
|
// .pipe(gulp.dest('src/'))
|
|
.pipe(uglify())
|
|
.pipe(rename({extname: '.min.js'}))
|
|
.pipe(sourcemaps.write('.'))
|
|
.pipe(gulp.dest('src/'));
|
|
}
|
|
|
|
function buildStyleFiles() {
|
|
return gulp.src('src/**/*.scss')
|
|
.pipe(sourcemaps.init({}))
|
|
.pipe(sass.sync().on('error', sass.logError))
|
|
// .pipe(gulp.dest('src/'))
|
|
.pipe(rename({extname: '.min.css'}))
|
|
.pipe(sourcemaps.write('.'))
|
|
.pipe(gulp.dest('src/'))
|
|
}
|
|
|
|
// TODO:
|
|
//
|
|
// [v] Add Gulp for CSS/JS Styling
|
|
// [v] Add Browsersync that will refresh the page on changes
|
|
//
|
|
// Breakpoints and data options will come from backend server.
|
|
// - Top Panel with options to switch data (select input)
|
|
// - Options to resize the page and test Responsiveness (select input)
|
|
|