diff --git a/06-build-page/index.js b/06-build-page/index.js index 3069ef6e..aa583711 100644 --- a/06-build-page/index.js +++ b/06-build-page/index.js @@ -1,113 +1,82 @@ -const fs = require('fs'); -const path = require('path'); -const fsPromise = require('fs/promises'); -const { createBrotliCompress } = require('zlib'); -let dirDirection = path.resolve(__dirname + '/project-dist'); -let assetsDirection = path.resolve(__dirname + '/project-dist/assets'); -let htmlDirection = path.resolve(__dirname + '/project-dist/index.html'); -let csslDirection = path.resolve(__dirname + '/project-dist/style.css'); - - -fs.mkdir(dirDirection, { recursive: true }, err => { - if(err) throw err; -}); - -fs.mkdir(assetsDirection, { recursive: true }, err => { - if(err) throw err; -}); - +const fs = require("fs/promises"); +const path = require("path"); + +const distDir = path.join(__dirname, "project-dist"); +const assetsSrc = path.join(__dirname, "assets"); +const assetsDist = path.join(distDir, "assets"); +const htmlDist = path.join(distDir, "index.html"); +const cssDist = path.join(distDir, "style.css"); +const templateFile = path.join(__dirname, "template.html"); +const componentsDir = path.join(__dirname, "components"); +const stylesDir = path.join(__dirname, "styles"); + +// Ensure directories exist +async function prepareDist() { + await fs.mkdir(distDir, { recursive: true }); + await fs.mkdir(assetsDist, { recursive: true }); + await fs.writeFile(htmlDist, ""); + await fs.writeFile(cssDist, ""); +} -fs.writeFile( - htmlDirection, - '', - (err) => { - if (err) throw err; - }); +// Copy assets folder recursively +async function copyAssets(src, dest) { + await fs.mkdir(dest, { recursive: true }); + const entries = await fs.readdir(src, { withFileTypes: true }); -fs.writeFile( - csslDirection, - '', - (err) => { - if (err) throw err; - }); + for (const entry of entries) { + const srcPath = path.join(src, entry.name); + const destPath = path.join(dest, entry.name); -async function copyDirectory () { - try { - const readDir = await fsPromise.readdir('06-build-page/assets', {withFileTypes: true}); - for (const dir of readDir) { - let copies = await fsPromise.readdir(`06-build-page/assets/${dir.name}`, {withFileTypes: true}); - console.log(dir.name); - fs.mkdir(`06-build-page/project-dist/assets/${dir.name}`, { recursive: true }, err => { - if(err) throw err; - }); - let readyCopy = await fsPromise.readdir(`06-build-page/project-dist/assets/${dir.name}`, {withFileTypes: true}); - for (const file of readyCopy) { - fs.unlink(`06-build-page/project-dist/assets/${dir.name}/${file.name}`, function(err){ - if (err) { - console.log(err); - } - }); - } - for (const copy of copies) { - // console.log(`06-build-page/assets/${readDir[i].name}/${copy.name}`) - fs.copyFile(`06-build-page/assets/${dir.name}/${copy.name}`, `06-build-page/project-dist/assets/${dir.name}/${copy.name}`, (err) => { - if (err) { - console.log('Error Found:', err); - } - }); - - } + if (entry.isDirectory()) { + await copyAssets(srcPath, destPath); + } else { + await fs.copyFile(srcPath, destPath); } - - - } catch(err) { - console.log((err)); } } -copyDirectory(); - -async function createHtml() { - try { - let templateHtml = await fsPromise.readFile(__dirname + '/' + 'template.html'); - let htmlComponents = await fsPromise.readdir(__dirname + '/' + 'components', {withFileTypes: true}); - let htmlTxt = templateHtml.toString(); - let currentPart = ''; - for (const component of htmlComponents) { - if (component.isFile() && path.extname(component.name) === '.html'){ - currentPart = await fsPromise.readFile(__dirname + '/components/' + `${component.name}`); - htmlTxt = htmlTxt.replace(`{{${component.name.slice(0, -5)}}}`, currentPart.toString()); +// Build HTML by replacing components +async function buildHtml() { + let template = await fs.readFile(templateFile, "utf-8"); + const components = await fs.readdir(componentsDir, { withFileTypes: true }); - } + for (const comp of components) { + if (comp.isFile() && path.extname(comp.name) === ".html") { + const placeholder = `{{${path.basename(comp.name, ".html")}}}`; + const content = await fs.readFile(path.join(componentsDir, comp.name), "utf-8"); + template = template.replace(placeholder, content); } - fsPromise.writeFile(__dirname + '/project-dist/index.html', htmlTxt); - - } catch(err) { - console.log((err)); } + + await fs.writeFile(htmlDist, template); } -createHtml(); +// Merge all CSS into one +async function buildCss() { + const styles = await fs.readdir(stylesDir, { withFileTypes: true }); + const cssContents = []; + + for (const file of styles) { + if (file.isFile() && path.extname(file.name) === ".css") { + const content = await fs.readFile(path.join(stylesDir, file.name), "utf-8"); + cssContents.push(content); + } + } + await fs.writeFile(cssDist, cssContents.join("\n")); +} -async function copyStyles() { +// Main build process +async function build() { try { - - let stylesComponents = await fsPromise.readdir(__dirname + '/' + 'styles', {withFileTypes: true}); - for (const styles of stylesComponents) { - if (styles.isFile() === true && path.extname(styles.name) == '.css') { - let currentCss = await fsPromise.readFile(__dirname + `/styles/${styles.name}`, 'utf-8'); - fs.appendFile( - (__dirname + '/project-dist/style.css'), - currentCss, - err => { - if (err) throw err; - }); - } - } - } catch(err) { - console.log((err)); + await prepareDist(); + await copyAssets(assetsSrc, assetsDist); + await buildHtml(); + await buildCss(); + console.log("Build completed successfully!"); + } catch (err) { + console.error("Build failed:", err); } } -copyStyles(); \ No newline at end of file +build();