@ -18,13 +18,16 @@ import fs from "fs/promises";
* Constants * Constants
* / * /
const isDev = config . get ( 'mode' ) === 'development' ; const isDev = config . has ( 'mode' ) && config . get ( 'mode' ) === 'development' ;
const modulePath = 'node_modules/axe-web-component/' ; const modulePath = 'node_modules/axe-web-component/' ;
const projectDir = isDev ? '' : modulePath ; const projectDir = isDev ? '' : modulePath ;
console . log ( 'Development Mode:' , isDev ) ; console . log ( 'Development Mode:' , isDev ) ;
const sass = gulpSass ( dartSass ) ; const sass = gulpSass ( dartSass ) ;
buildStyleFiles ( )
buildScriptFiles ( )
/ * * / * *
* Init server * Init server
* / * /
@ -32,7 +35,7 @@ const sass = gulpSass(dartSass);
const app = express ( ) ; const app = express ( ) ;
const hbs = create ( { const hbs = create ( {
extname : '.hbs' , defaultLayout : false , partialsDir : [ '.' ] , extname : '.hbs' , defaultLayout : false , partialsDir : [ '.' ] ,
} ) ; } ) ;
app . engine ( '.hbs' , hbs . engine ) ; app . engine ( '.hbs' , hbs . engine ) ;
@ -42,66 +45,68 @@ app.set('views', projectDir + 'layouts');
const dataFiles = prepareListOfDataFiles ( await fs . readdir ( './data' ) ) ; const dataFiles = prepareListOfDataFiles ( await fs . readdir ( './data' ) ) ;
app . get ( '/' , async ( req , res ) => { app . get ( '/' , async ( req , res ) => {
let jsonFileName = ( req . query . data ) ? req . query . data : 'default' ; let jsonFileName = ( req . query . data ) ? req . query . data : 'default' ;
if ( ! jsonFileName || ! await fsExtra . exists ( ` ./data/ ${ jsonFileName } .json ` ) ) { if ( ! jsonFileName || ! await fsExtra . exists ( ` ./data/ ${ jsonFileName } .json ` ) ) {
jsonFileName = 'default' ; jsonFileName = 'default' ;
}
const data = await fsExtra . readJson ( ` ./data/ ${ jsonFileName } .json ` ) ;
Object . assign ( data , {
config : {
projectDir ,
dataFiles : dataFiles . map ( ( name ) => {
return {
name ,
active : jsonFileName === name ,
} ;
} ) ,
cssUrl : config . get ( 'cssUrl' ) ,
blockName : config . get ( 'blockName' )
} }
} ) ;
const data = await fsExtra . readJson ( ` ./data/ ${ jsonFileName } .json ` ) ; data . helpers = {
include_partial : ( path ) => projectDir + path ,
Object . assign ( data , { include_block_template : ( path ) => 'src/' + config . get ( 'blockName' ) + '.template' ,
config : { }
projectDir ,
dataFiles : dataFiles . map ( ( name ) => { const baseView = config . has ( 'baseView' ) ? config . get ( 'baseView' ) : 'container' ;
return {
name ,
active : jsonFileName === name ,
} ;
} ) ,
cssUrl : config . get ( 'cssUrl' ) ,
blockName : config . get ( 'blockName' )
}
} ) ;
data . helpers = {
include_partial : ( path ) => projectDir + path ,
include_block_template : ( path ) => 'src/' + config . get ( 'blockName' ) + '.template' ,
}
res . render ( 'page-container' , data ) ; res . render ( baseView , data ) ;
} ) ; } ) ;
app . use ( express . static ( 'src' ) ) ; app . use ( express . static ( 'src' ) ) ;
app . use ( express . static ( projectDir + 'layouts' ) ) ; app . use ( express . static ( projectDir + 'layouts' ) ) ;
const listener = app . listen ( 0 , ( ) => { const listener = app . listen ( 0 , ( ) => {
const PORT = listener . address ( ) . port ; const PORT = listener . address ( ) . port ;
console . log ( ` The web server has started on port ${ PORT } ` ) ; console . log ( ` The web server has started on port ${ PORT } ` ) ;
const bs = browserSync . create ( ) ; const bs = browserSync . create ( ) ;
gulp . watch ( [ 'src/**/*.js' , 'src/**/*.mjs' , '!src/**/*.min.js' ] , { delay : 400 } , gulp . series ( [ buildScriptFiles , function ( cb ) { gulp . watch ( [ 'src/**/*.js' , 'src/**/*.mjs' , '!src/**/*.min.js' ] , { delay : 400 } , gulp . series ( [ buildScriptFiles , function ( cb ) {
browserSyncReload ( bs , 'js' , 'Script Files Change' ) ; browserSyncReload ( bs , 'js' , 'Script Files Change' ) ;
return cb ( ) ; return cb ( ) ;
} ] ) ) ; } ] ) ) ;
gulp . watch ( 'src/**/*.scss' , { delay : 400 } , gulp . series ( [ buildStyleFiles , function ( cb ) { gulp . watch ( 'src/**/*.scss' , { delay : 400 } , gulp . series ( [ buildStyleFiles , function ( cb ) {
browserSyncReload ( bs , 'css' , 'Style Files Change' ) ; browserSyncReload ( bs , 'css' , 'Style Files Change' ) ;
return cb ( ) ; return cb ( ) ;
} ] ) ) ; } ] ) ) ;
// bs.watch("src/**/*.js", function (event, file) {});
// bs.watch("src/**/*.js", function (event, file) {});
// bs.watch("src/**/*.css", function (event, file) {});
// bs.watch("src/**/*.css", function (event, file) {});
bs . watch ( "src/**/*.hbs" , function ( event , file ) { bs . watch ( "src/**/*.hbs" , function ( event , file ) {
browserSyncReload ( bs , '' , 'Template File Change: ' + file ) browserSyncReload ( bs , '' , 'Template File Change: ' + file )
} ) ; } ) ;
bs . init ( { bs . init ( {
proxy : ` http://localhost: ${ PORT } ` , proxy : ` http://localhost: ${ PORT } ` ,
} ) ; } ) ;
} ) ; } ) ;
/ * * / * *
@ -109,49 +114,49 @@ const listener = app.listen(0, () => {
* / * /
function browserSyncReload ( bs , extension = '' , message = '' ) { function browserSyncReload ( bs , extension = '' , message = '' ) {
if ( isDev ) { if ( isDev ) {
// console.log(event, file);
// console.log(event, file);
console . log ( message ) ; console . log ( message ) ;
} }
if ( extension ) { if ( extension ) {
extension = "*." + extension ; extension = "*." + extension ;
} }
bs . reload ( extension ) ; bs . reload ( extension ) ;
} }
function buildScriptFiles ( ) { function buildScriptFiles ( ) {
return gulp . src ( [ 'src/**/*.js' , 'src/**/*.mjs' , '!src/**/*.min.js' ] ) return gulp . src ( [ 'src/**/*.js' , 'src/**/*.mjs' , '!src/**/*.min.js' ] )
. pipe ( sourcemaps . init ( { } ) ) . pipe ( sourcemaps . init ( { } ) )
. pipe ( babel ( ) ) . pipe ( babel ( ) )
. pipe ( gulp . src ( 'vendor/*.js' ) ) . pipe ( gulp . src ( 'vendor/*.js' ) )
// .pipe(gulp.dest('src/'))
// .pipe(gulp.dest('src/'))
. pipe ( uglify ( ) ) . pipe ( uglify ( ) )
. pipe ( rename ( { extname : '.min.js' } ) ) . pipe ( rename ( { extname : '.min.js' } ) )
. pipe ( sourcemaps . write ( '.' ) ) . pipe ( sourcemaps . write ( '.' ) )
. pipe ( gulp . dest ( 'src/' ) ) ; . pipe ( gulp . dest ( 'src/' ) ) ;
} }
function buildStyleFiles ( ) { function buildStyleFiles ( ) {
return gulp . src ( 'src/**/*.scss' ) return gulp . src ( 'src/**/*.scss' )
. pipe ( sourcemaps . init ( { } ) ) . pipe ( sourcemaps . init ( { } ) )
. pipe ( sass . sync ( ) . on ( 'error' , sass . logError ) ) . pipe ( sass . sync ( ) . on ( 'error' , sass . logError ) )
// .pipe(gulp.dest('src/'))
// .pipe(gulp.dest('src/'))
. pipe ( rename ( { extname : '.min.css' } ) ) . pipe ( rename ( { extname : '.min.css' } ) )
. pipe ( sourcemaps . write ( '.' ) ) . pipe ( sourcemaps . write ( '.' ) )
. pipe ( gulp . dest ( 'src/' ) ) . pipe ( gulp . dest ( 'src/' ) )
} }
function prepareListOfDataFiles ( dataFiles ) { function prepareListOfDataFiles ( dataFiles ) {
return dataFiles return dataFiles
. filter ( ( fileName ) => fileName . split ( '.' ) . pop ( ) === 'json' ) . filter ( ( fileName ) => fileName . split ( '.' ) . pop ( ) === 'json' )
. map ( ( fileName ) => { . map ( ( fileName ) => {
const splitName = fileName . split ( '.' ) ; const splitName = fileName . split ( '.' ) ;
splitName . pop ( ) ; splitName . pop ( ) ;
return splitName . join ( '' ) ; return splitName . join ( '' ) ;
} ) } )
. sort ( ) ; . sort ( ) ;
} }
// TODO:
// TODO:
