chore: Update Gulp configuration and dependencies

Errec · Aug 19, 2024 · 06ebbd0 · 06ebbd0
1 parent f65d016
commit 06ebbd0
Show file tree

Hide file tree

Showing 27 changed files with 446 additions and 330 deletions.
diff --git a/_gulp/combineTasks.ts b/_gulp/combineTasks.ts
@@ -0,0 +1,93 @@
+import { parallel, series } from 'gulp';
+import { browserSyncServe, createWatchTask } from './modules/buildEnvironment';
+import { UserChoices } from './types';
+import { logger } from './utils/logger';
+
+async function loadUserChoices(): Promise<UserChoices> {
+  try {
+    const { readFile } = await import('fs/promises');
+    const data = await readFile('_gulp/user-choices.json', 'utf8');
+    return JSON.parse(data);
+  } catch (error) {
+    logger.error('Failed to load user choices. Please run setup again.');
+    process.exit(1);
+  }
+}
+
+async function createGulpTasks() {
+  const choices = await loadUserChoices();
+
+  try {
+    const { styleTask } = await import('./tasks/styleTask');
+    const { scriptTask } = await import('./tasks/scriptTask');
+    const { markupTask } = await import('./tasks/markupTask');
+    const { imagesTask } = await import('./tasks/imagesTask');
+    const { cleanTask } = await import('./tasks/cleanTask');
+
+    const watchTask = createWatchTask(choices, {
+      styleTask: styleTask(choices),
+      scriptTask: scriptTask(choices),
+      markupTask: markupTask(choices),
+      imagesTask
+    });
+
+    const defaultTask = series(
+      cleanTask,
+      parallel(
+        styleTask(choices),
+        scriptTask(choices),
+        markupTask(choices),
+        imagesTask
+      ),
+      browserSyncServe,
+      watchTask
+    );
+
+    const buildTask = series(
+      cleanTask,
+      parallel(
+        styleTask(choices),
+        scriptTask(choices),
+        markupTask(choices),
+        imagesTask
+      )
+    );
+
+    return { defaultTask, buildTask };
+  } catch (error) {
+    logger.error(`Failed to create Gulp tasks: ${(error as Error).message}`);
+    process.exit(1);
+  }
+}
+
+export async function run() {
+  try {
+    const { defaultTask, buildTask } = await createGulpTasks();
+
+    if (process.argv.includes('build')) {
+      buildTask((err?: Error | null) => {
+        if (err) {
+          logger.error(`Build failed: ${err.message}`);
+        } else {
+          logger.success('Build completed successfully');
+        }
+      });
+    } else {
+      defaultTask((err?: Error | null) => {
+        if (err) {
+          logger.error(`Development server failed: ${err.message}`);
+        } else {
+          logger.success('Development server started');
+        }
+      });
+    }
+  } catch (error) {
+    logger.error(`An error occurred during execution: ${(error as Error).message}`);
+    process.exit(1);
+  }
+}
+
+run().catch(error => {
+  logger.error(`An error occurred: ${(error as Error).message}`);
+  process.exit(1);
+});
diff --git a/_gulp/gulpSetup.ts b/_gulp/gulpSetup.ts
@@ -22,27 +22,30 @@ async function setup(): Promise<void> {
 
     const choices: UserChoices = await promptUser();
 
-    // Save user choices for later use
     await writeFile('_gulp/user-choices.json', JSON.stringify(choices, null, 2));
 
     createProjectStructure(choices);
     createProjectFiles(choices);
     copyVendorCSS(choices);
     generateGulpfile(choices);
 
-    logger.success('Setup complete.');
-      logger.info('Starting live server...');
+    logger.success('Setup complete. Gulpfile has been generated.');
+    logger.info('Starting development server...');
 
-      exec('gulp', (err, stdout, stderr) => {
-        if (err) {
-          logger.error(`Error starting live server: ${err.message}`);
-          return;
-        }
-        console.log(stdout);
-      });
+    exec('yarn start', (error, stdout, stderr) => {
+      if (error) {
+        logger.error(`Error: ${error.message}`);
+        return;
+      }
+      if (stderr) {
+        logger.error(`Stderr: ${stderr}`);
+        return;
+      }
+      console.log(stdout);
+    });
   } catch (error: unknown) {
-    logger.error(`An error occurred during setup: ${(<Error>error).message}`);
+    logger.error(`An error occurred during setup: ${(error as Error).message}`);
   }
 }
 
-setup();
+setup();
diff --git a/_gulp/intex.ts b/_gulp/intex.ts
diff --git a/_gulp/modules/buildEnvironment.ts b/_gulp/modules/buildEnvironment.ts
@@ -1,11 +1,15 @@
-import browserSync from 'browser-sync';
+import { create as createBrowserSync } from 'browser-sync';
 import { series, watch } from 'gulp';
 import { UserChoices } from '../types';
 
-const bs = browserSync.create();
+const bs = createBrowserSync();
 
 export function browserSyncServe(cb: () => void): void {
-  bs.init({ server: { baseDir: 'dist/' } });
+  bs.init({
+    server: { baseDir: 'dist/' },
+    open: false,
+    notify: false
+  });
   cb();
 }
 
@@ -17,7 +21,7 @@ export function browserSyncReload(cb: () => void): void {
 export function createWatchTask(choices: UserChoices, tasks: Record<string, () => void>) {
   const stylePath = `src/${choices.style === 'Sass' ? 'sass' : 'scss'}/**/*.${choices.style === 'Sass' ? 'sass' : 'scss'}`;
   const scriptPath = `src/${choices.script === 'TypeScript' ? 'ts' : 'js'}/**/*.${choices.script === 'TypeScript' ? 'ts' : 'js'}`;
-  const markupPath = `src/${choices.markup === 'Pug' ? 'templates/**/*.pug' : 'html/**/*.html'}`;
+  const markupPath = `src/${choices.markup === 'Pug' ? 'pug' : 'html'}/**/*.${choices.markup === 'Pug' ? 'pug' : 'html'}`;
   const imgPath = 'src/img/**/*';
 
   return function watchTask(): void {

diff --git a/_gulp/modules/fileSetup.ts b/_gulp/modules/fileSetup.ts
@@ -1,13 +1,12 @@
-import path from 'path';
 import { UserChoices } from '../types';
 import { copyFile, createDirectory, writeFile } from '../utils/fileSystem';
 
 export function createProjectStructure(choices: UserChoices): void {
   const dirs = [
     'src',
     `src/${choices.script === 'JavaScript' ? 'js' : 'ts'}`,
-    `src/${choices.style === 'Sass' ? 'sass' : 'scss'}/_base`,
-    `src/${choices.markup === 'HTML' ? 'html' : 'templates'}`,
+    `src/${choices.style === 'Sass' ? 'sass/base' : 'scss/base'}`,  // Updated path for base
+    `src/${choices.markup === 'HTML' ? 'html' : 'pug'}`,
     'src/img',
     'dist/css'
   ];
@@ -24,27 +23,27 @@ export function createProjectFiles(choices: UserChoices): void {
     : 'console.log("Hello, TypeScript!");';
   writeFile(`src/${scriptExt}/main.${scriptExt}`, scriptContent);
 
-  let styleContent = `/* Main ${choices.style} file */`;
-  if (choices.addNormalize) styleContent = `@import '_base/normalize'${choices.style === 'Sass' ? '' : ';'}\n${styleContent}`;
-  if (choices.addReset) styleContent = `@import '_base/reset'${choices.style === 'Sass' ? '' : ';'}\n${styleContent}`;
+  let styleContent = `// Main ${choices.style} file\n`;
+  if (choices.addNormalize) styleContent += choices.style === 'Sass' ? "@import 'base/normalize'\n" : "@import 'base/normalize';\n";
+  if (choices.addReset) styleContent += choices.style === 'Sass' ? "@import 'base/reset'\n" : "@import 'base/reset';\n";
   writeFile(`src/${styleExt}/main.${styleExt}`, styleContent);
 
   const markupContent = choices.markup === 'HTML' ? getHtmlTemplate() : getPugTemplate();
-  const markupFilePath = choices.markup === 'HTML' ? 'src/html/index.html' : 'src/templates/index.pug';
+  const markupFilePath = choices.markup === 'HTML' ? 'src/html/index.html' : 'src/pug/index.pug';
 
   writeFile(markupFilePath, markupContent);
   writeFile('src/favicon.ico', '');
 }
 
 export function copyVendorCSS(choices: UserChoices): void {
   const vendorFiles = [
-    { type: 'Normalize', src: '_gulp/vendors/normalize.css' },
-    { type: 'Reset', src: '_gulp/vendors/reset.css' }
+    { type: 'Normalize', src: `_gulp/vendors/normalize.${choices.style === 'Sass' ? 'sass' : 'scss'}` },
+    { type: 'Reset', src: `_gulp/vendors/reset.${choices.style === 'Sass' ? 'sass' : 'scss'}` }
   ];
 
   vendorFiles.forEach(file => {
     if (choices[`add${file.type}` as keyof UserChoices]) {
-      const dest = `src/${choices.style === 'Sass' ? 'sass' : 'scss'}/_base/${file.type.toLowerCase()}.css`;
+      const dest = `src/${choices.style === 'Sass' ? 'sass/base' : 'scss/base'}/_${file.type.toLowerCase()}.${choices.style === 'Sass' ? 'sass' : 'scss'}`;  // Save in base folder
       copyFile(file.src, dest);
     }
   });
@@ -81,4 +80,4 @@ html(lang="en")
   body
     h1 Hello, World!
     script(src="js/main.js")`;
-}
+}