patrick-gulp-core

Ein modularer Gulp-Workflow für statische Webseiten mit Unterstützung für:

• SCSS-Kompilierung und Minifizierung
• HTML/PHP/Kit-Verarbeitung via gulp-kit-2
• WebP-Konvertierung für Bilder
• Automatisches Kopieren statischer Dateien & Favicons
• Live-Reload mit BrowserSync
• Rsync-Deployment

🚀 Schnellstart

Wenn du patrick-gulp-core als eigenständiges Projekt testen willst:

git clone git@git.davidt.cloud:patrick/patrick-gulp-core.git
cd patrick-gulp-core
npm install

Wenn du patrick-gulp-core als Submodul in ein bestehendes Projekt einbindest:

git submodule add git@git.davidt.cloud:patrick/patrick-gulp-core.git core

Anschließend im gulpfile.js deines Projekts:

const core = require('./core');

exports.default = core.dev;      // Oder core.build, je nachdem was du starten willst
exports.build = core.build;
exports.dev = core.dev;
exports.deploy = core.deploy;

Dann im Submodul-Verzeichnis die Abhängigkeiten installieren:

cd core
npm install

Node_modules verlinken aus dem Projektroot:

ln -s core/node_modules

Falls das Submodul leer ist oder nicht initialisiert wurde:

git submodule update --init --recursive

📦 Beispiel: package.json im Projekt-Root

{
  "name": "pneumologie-rutsch",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "build": "npx gulp build",
    "dev": "npx gulp dev",
    "deploy": "npx gulp deploy"
  },
  "author": "",
  "license": "UNLICENSED"
}

Hinweis: node_modules und package-lock.json befinden sich nur im core/-Verzeichnis.

⚙️ Konfiguration

Lege im Projekt-Root eine Datei project.config.js an. Beispiel:

require('dotenv').config();

const useBootstrap = process.env.USE_BOOTSTRAP === 'true';

const stylesPath = useBootstrap
  ? {
      source: 'source/styles/**/*.scss',
      entry: 'source/styles/main.scss',
      dest: 'build/styles'
    }
  : {
      source: 'source/assets/sass/**/*.scss',
      entry: 'source/assets/sass/main.scss',
      dest: 'build/assets/css'
    };

const scriptsPath = useBootstrap
  ? {
      source: 'source/js/**/*.js',
      entry: 'source/js/main.js',
      dest: 'build/js'
    }
  : {
      source: 'source/assets/js/**/*.js',
      entry: 'source/assets/js/main.js',
      dest: 'build/assets/js'
    };

module.exports = {
  useBootstrap,

  paths: {
    source: 'source',
    build: 'build',

    styles: stylesPath,
    scripts: scriptsPath,

    images: {
      source: [
        'source/images/**/*.{jpg,jpeg,png}',
        'source/assets/css/images/**/*.{jpg,jpeg,png}'
      ],
      other: [
        'source/images/**/*.{gif,svg,webp}',
        'source/assets/css/images/**/*.{gif,svg,webp}'
      ],
      dest: 'build/images'
    },

    markup: {
      source: ['source/**/*.{kit,html,php}'],
      entry: ['source/**/*.{kit,html,php}'],
      exclude: ['source/includes/**'],
      dest: 'build'
    },

    static: {
      source: [
        'source/assets/**/*',
        '!source/assets/sass/**/*',
        '!source/assets/scss/**/*',
        '!source/assets/css/**/*.css',
        '!source/assets/css/images/**/*'
      ],
      dest: 'build/assets'
    },

    vendor: {
      fontawesome: useBootstrap
        ? null
        : 'node_modules/@fortawesome/fontawesome-free/webfonts/*',
      jquery: 'node_modules/jquery/dist/jquery.min.js',
      scrollex: null,
      scrolly: null,
      destFonts: 'build/assets/webfonts',
      destJs: 'build/assets/js'
    },

    favicons: {
      source: ['source/*.{png,ico,svg,webmanifest}'],
      dest: 'build'
    }
  },

  extensionMapping: {
    'kontakt': '.php',
    'index': '.php',
    '400': '.shtml',
    '401': '.shtml',
    '403': '.shtml',
    '404': '.shtml'
  },

  serve: {
    proxy: 'http://davidt-cloud.localhost',
    port: 3000,
    open: true
  },

  deploy: {
    host: 'davidt@152.53.119.146',
    path: '/home/davidt/htdocs/davidt.cloud',
    port: 2222,
    excludes: ['.DS_Store', '.git']
  }
};

📦 Befehle

npm run build     # Produktionserstellung
npm run dev       # Entwicklung mit Watch/LiveReload (falls aktiviert)
npm run deploy    # Veröffentlichen via rsync (wenn konfiguriert)

🛠 Struktur

• gulpfile.js – ruft die core-Tasks auf (build, dev, deploy)
• core/index.js – zentrale Aufgabensteuerung
• core/lib/tasks/ – modulare Gulp-Tasks
• core/lib/utils/config.js – lädt deine project.config.js
• core/package.json – definiert die benötigten Abhängigkeiten

🗃 Hinweise

• Du kannst mehrere Projekte mit identischer patrick-gulp-core-Basis betreiben
• Nutze das Repo als Submodul, um es zentral zu pflegen und bei Bedarf zu aktualisieren:

cd core
git pull origin main
cd ..
git add core
git commit -m "Submodul aktualisiert"

• Optional: Verlinkung mit VS Code Tasks möglich

---

© Patrick Davidt – Frei verwendbar mit Attribution