rewrite

* added proxy-middleware * added express server had to add the express server to see the files in my directory and proxy-middleware to get gulp and browser-sync to work
2026-08-24 03:24:12 -05:00 · 2024-09-09 13:08:49 -05:00
parent 3650a1c74e
commit 6d02557f56
7 changed files with 128 additions and 26 deletions
@@ -2,4 +2,3 @@ node_modules/
 .vscode/
 dist/
 package-lock.json
-main.html
@@ -3,36 +3,26 @@ const browserSyncInstance = require('browser-sync').create()
 const sass = require('sass')
 const gulpSass = require('gulp-sass')(sass)

-// Dynamic import of gulp-autoprefixer
-async function loadAutoprefixer() {
-    const { default: autoprefixer } = await import('gulp-autoprefixer')
-    return autoprefixer
-}
-

 // Compile Sass into CSS & auto-inject into browsers
 gulp.task('sass', async function () {
-  const autoprefixer = await loadAutoprefixer();  // Load autoprefixer dynamically
  return gulp.src('src/scss/**/*.scss')
    .pipe(gulpSass().on('error', gulpSass.logError))  // Compile SCSS with error logging
-    .pipe(autoprefixer({
-      overrideBrowserslist: ['last 2 versions'],
-      cascade: false
-    }))
+    
    .pipe(gulp.dest('dist/css'))
    .pipe(browserSyncInstance.stream());  // Inject CSS changes into the browser
 })

 // Start a local server with BrowserSync & watch files for changes
-gulp.task('serve', function () {
+gulp.task('serve', () => {
  browserSyncInstance.init({
-    server: './src'  // Serve from the root directory (or specify a different folder)
-  });
+      proxy: 'http://localhost:3002',
+      files: ['src/**/*.html', 'dist/css/*.css', 'src/scripts/**/*.js'],
+      port: 3000
+  })

-  gulp.watch('src/scss/**/*.scss', gulp.series('sass'));  // Watch for Sass changes
-  gulp.watch('*.html').on('change', browserSyncInstance.reload);  // Watch for HTML changes
-  gulp.watch('dist/css/**/*.css').on('change', browserSyncInstance.reload);  // Watch for CSS changes
+  gulp.watch('src/scss/**/*.scss', gulp.series('sass'))
 })

 // Default task: compile Sass, autoprefix, and start the server
-gulp.task('default', gulp.series('sass', 'serve'));
+gulp.task('default', gulp.series('sass', 'serve'))
@@ -5,7 +5,7 @@
  "type": "commonjs",
  "main": "index.js",
  "scripts": {
-    "start": "gulp"
+    "start": "concurrently \"gulp\" \"node server.js\""
  },
  "author": "bckelley",
  "license": "CC BY-NC-SA 4.0",
@@ -13,10 +13,15 @@
    "node": ">=18.8.0"
  },
  "devDependencies": {
-    "browser-sync": "^2.18.13",
+    "browser-sync": "^3.0.2",
+    "concurrently": "^9.0.0",
    "gulp": "^5.0.0",
    "gulp-autoprefixer": "^9.0.0",
    "gulp-sass": "^5.1.0",
    "sass": "^1.56.0"
+  },
+  "dependencies": {
+    "express": "^4.19.2",
+    "http-proxy-middleware": "^3.0.2"
  }
 }
@@ -0,0 +1,38 @@
+const express = require('express')
+const fs = require('fs')
+const path = require('path')
+const { createProxyMiddleware } = require('http-proxy-middleware');
+
+const app = express()
+const port = '3002'
+
+app.use('/dist/css', express.static(path.join(__dirname, 'dist/css')))
+
+app.use('/src/edits', express.static(path.join(__dirname, 'src/edits')))
+
+app.get('/', (req, res) => {
+    res.sendFile(path.join(__dirname, 'src', 'index.html'));
+})
+
+app.get('/api/files', (req, res) => {
+    const dirPath = path.join(__dirname, 'src/edits/')
+    const exts = '.html'
+
+    fs.readdir(dirPath, (err, files) => {
+        if (err) {
+            console.error("Error reading directory", err)
+            return res.status(500).json({ error: "Could not read the directory" })
+        }
+
+        res.json({ files: files })
+    })
+})
+
+app.use('/api', createProxyMiddleware({
+    target: 'http://localhost:3000',
+    changeOrigin: true
+}))
+
+app.listen(port, () => {
+    console.log(`Server is running on http://localhost:${port}`)
+})
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" href="../../dist/css/style.css">
+    <title>Document</title>
+</head>
+<body>
+    <header class="showcase">
+        <div class="container">
+            <nav>
+                <h1 class="logo">My Website</h1>
+                <ul>
+                    <li><a href="#">Home</a></li>
+                    <li><a href="#">About</a></li>
+                    <li><a href="#">Services</a></li>
+                </ul>
+            </nav>
+
+            <div class="showcase-content">
+                <div>
+                    <h1>Make Your Marketing Real</h1>
+                    <p class="my-1">
+                        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Est
+                        eligendi tempore atque laborum. Quisquam nemo at non. Corrupti,
+                        vitae dolore. Lorem voluptate Lorem cupidatat in cillum quis reprehenderit minim aliquip. Ullamco tempor adipisicing velit id amet eiusmod ullamco pariatur magna dolore. Eiusmod id in ut aute velit reprehenderit est dolore dolor.
+                    </p>
+                    <a href="#" class="btn-primary">Learn More</a>
+                    <a href="#" class="btn-secondary">Sign Up</a>
+                </div>
+                <img
+                    src="https://themesbrand.com/zooki/layout/images/home-2-img.png"
+                />
+            </div>
+        </div>
+    </header>
+</body>
+</html>
@@ -1,15 +1,45 @@
 <!DOCTYPE html>
 <html class="no-js" lang="en">
 <head>
-  <title>Sass Starter Pack</title>
+  <title>Sass Workflow</title>
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <link rel="stylesheet" href="css/style.css">
+  <!--<link rel="stylesheet" href="../dist/css/style.css">//-->
+
 </head>

 <body>
    <h1>Sass Workflow</h1>
    <p>Edit the scss/style.scss file and it will automatically compile into css/style.css</p>
+
+    <ul id="fileList"></ul>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            fetch('/api/files')
+            .then(res => res.json())
+            .then(data => {
+            /*  console.log(data)  */
+                const fileList = document.getElementById('fileList')
+                if ( Array.isArray(data.files) ) {
+                    data.files.forEach(file => {
+                        const li = document.createElement('li')
+                        const a = document.createElement('a')
+                        a.href = `/src/edits/${file}`
+                        a.textContent = file
+                        li.appendChild(a)
+                        fileList.appendChild(li)
+                    });
+                } else {
+                    console.error("Expected 'files' to be an array, but got:", data.files);
+                }
+            })
+            .catch(err => {
+                console.error("[ ERR ]: Error fetching file list: ", err)
+            })
+        })
+    </script>
+
 </body>

 </html>