mirror of
https://github.com/stronk-dev/RandomChad.git
synced 2025-07-05 10:35:08 +02:00
123 lines
3.0 KiB
JavaScript
123 lines
3.0 KiB
JavaScript
// Browser sync stuff
|
|
const BrowserSyncPlugin = require( 'browser-sync-webpack-plugin' )
|
|
const bs = require( 'browser-sync' )
|
|
|
|
// Webpack and css
|
|
const webpack = require( 'webpack' )
|
|
|
|
// Workflow
|
|
const { watch } = require( 'fs' )
|
|
const { css } = require( __dirname + '/modules/publish-css' )
|
|
|
|
|
|
// Site config
|
|
const site = require( __dirname + '/modules/config' )
|
|
|
|
// Conversions
|
|
const publishpug = require( __dirname + '/modules/publish-pug' )
|
|
const publishassets = require( __dirname + '/modules/publish-assets' )
|
|
|
|
// Get environment variables
|
|
const dotenv = require( 'dotenv' )
|
|
const { NODE_ENV } = process.env
|
|
const dev = NODE_ENV == 'development'
|
|
|
|
// Helpers
|
|
const error = e => {
|
|
console.log( "\007" ) // Beep
|
|
console.error( "\x1b[31m", `\n 🛑 error: `, e && e.message || e, "\x1b[0m" )
|
|
}
|
|
|
|
// ///////////////////////////////
|
|
// Plugins
|
|
// ///////////////////////////////
|
|
let thebs
|
|
const servername = 'bsserver'
|
|
const bsconfig = {
|
|
host: 'localhost',
|
|
open: true,
|
|
cors: true,
|
|
port: 3000,
|
|
server: {
|
|
baseDir: [ site.system.public ],
|
|
serveStaticOptions: {
|
|
extensions: ['html']
|
|
}
|
|
},
|
|
notify: false
|
|
}
|
|
const bsyncplugconfig = {
|
|
name: servername,
|
|
callback: f => { thebs = bs.get( servername ) }
|
|
}
|
|
|
|
const envPlugin = new webpack.DefinePlugin( {
|
|
process: {
|
|
env: {
|
|
...JSON.stringify( dotenv.config().parsed ),
|
|
NODE_ENV: JSON.stringify( process.env.NODE_ENV )
|
|
}
|
|
}
|
|
} )
|
|
|
|
// ///////////////////////////////
|
|
// Watchers for non webpack files
|
|
// ///////////////////////////////
|
|
|
|
// Watch pug/sass
|
|
if ( dev ) watch( site.system.source, { recursive: true }, async ( eventType, filename ) => {
|
|
|
|
// Pug file was updated
|
|
if( filename.includes( 'pug' ) ) await publishpug( site, filename ).catch( error )
|
|
|
|
// Sass file was updated, rebuild sass and pug files
|
|
else if ( filename.includes( 'sass' ) || filename.includes( 'scss' ) ) {
|
|
if( filename.includes( 'essential-above-the-fold' ) ) await publishpug( site ).catch( error )
|
|
await css( site ).catch( error )
|
|
}
|
|
|
|
// Reload browser after every change
|
|
thebs.reload()
|
|
|
|
|
|
} )
|
|
|
|
// Watch asset folder
|
|
if ( dev ) watch( `${ site.system.source }/assets`, { recursive: true }, async ( eventType, filename ) => {
|
|
|
|
// Republish assets
|
|
await publishassets( site, filename ).catch( error )
|
|
|
|
// Reload browser after every change
|
|
thebs.reload()
|
|
|
|
|
|
} )
|
|
|
|
|
|
module.exports = async f => {
|
|
|
|
await Promise.all( [ publishpug( site ), publishassets( site ), css( site ) ] )
|
|
|
|
return {
|
|
entry: site.system.source + 'js/main.js',
|
|
mode: NODE_ENV,
|
|
output: {
|
|
filename: `app-${site.system.timestamp}.js`,
|
|
path: `${site.system.public}assets/js/`
|
|
},
|
|
module: {
|
|
rules: [
|
|
{
|
|
test: /\.js$/,
|
|
exclude: /node_modules/,
|
|
use: {
|
|
loader: 'babel-loader'
|
|
}
|
|
}
|
|
]
|
|
},
|
|
devtool: NODE_ENV == 'production' ? false : 'inline-source-map',
|
|
plugins: NODE_ENV == 'production' ? [ envPlugin ] : [ envPlugin, new BrowserSyncPlugin( bsconfig, bsyncplugconfig ) ]
|
|
}
|
|
} |