gulpfile-setup/gulpfile.mjs

import gulp from 'gulp';
import gf from 'get-google-fonts';
import concat from 'gulp-concat';
import autoprefixer from 'gulp-autoprefixer';
import cleanCSS from 'gulp-clean-css';
import * as dartSass from 'sass';
import gulpSass from 'gulp-sass';
import {deleteSync} from 'del';
import axios from 'axios';
import fs from 'fs-extra';
import path from 'path';
import imagemin from 'imagemin';
import imageminWebp from 'imagemin-webp';
import {config} from "./config.mjs";
const sass = gulpSass(dartSass);

async function prepareSrc(mixedSources) {
    await fs.ensureDir(config.tempDir); // Erstellt das temporäre Verzeichnis, falls es noch nicht existiert

    const localFilePaths = await Promise.all(mixedSources.map(async (source, index) => {
        const filename = `resource_${index}${path.extname(source)}`;
        const localPath = path.join(config.tempDir, filename);

        if (/^https?:\/\//i.test(source)) {
            // Source ist eine URL, also herunterladen
            const response = await axios({ url: source, responseType: 'arraybuffer' });
            await fs.writeFile(localPath, response.data);
        } else {
            // Source ist ein lokaler Pfad, also kopieren
            return source;
        }

        return localPath;
    }));

    return localFilePaths;
}


function clean() {
    cleanDist();
}

async function build() {
    await cleanDist();
    await copyPublic();
    await buildCss();
    await buildJs();
    await buildImg();
    await buildFont();
    publish();
}

async function watch() {
    await watchCss();
    await watchJs();
    await watchImg();
}

function cleanCss() {
    deleteSync([config.del.css]);
}

async function buildCss() {
    let sources;
    for (let name in config.css) {
        sources = await prepareSrc(Object.values(config.css[name]));
        gulp.src(sources)
            .pipe(sass().on('error',sass.logError))
            .pipe(autoprefixer({cascade: true}))
            .pipe(cleanCSS({compatibility: 'ie8'}))
            .pipe(concat(name + '.css'))
            .pipe(gulp.dest(config.dist + '/' + config.app))
    }
}

function watchCss() {
    gulp.watch(config.watch.css, gulp.series(buildCss))
}

function cleanJs() {
    deleteSync([config.del.js]);
}

async function buildJs() {
    let sources;
    for (let name in config.js) {
        sources = await prepareSrc(Object.values(config.js[name]));
        gulp.src(sources)
            .pipe(concat(name + '.js'))
            .pipe(gulp.dest(config.dist + '/' + config.app))
    }
}

function watchJs() {
    gulp.watch(config.watch.js, gulp.series(buildJs));
}

function cleanFont() {
    deleteSync([config.del.font]);
}
async function buildFont(){
    for (let name in config.font) {
        await new gf({
            outputDir: config.dist + '/' + config.app + '/fonts/' + name,
            cssFile: name + '.css',
            userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36',
            overwriting: true
        }).download(config.font[name]);
    }
}

function cleanImg() {
    deleteSync([config.del.img]);
}

async function buildImg(){
    const files = await imagemin([config.watch.img], {
        plugins: [
            imageminWebp({ quality: 80 }),
        ],
    });

    // Verarbeite jede Datei und speichere sie
    await files.forEach(file => {
        const relativePath = path.relative(config.watch.img, file.sourcePath);
        const outputPath = config.dist + '/' + config.app + '/' + relativePath.replace(path.extname(relativePath), '.webp').replace('../../', '');
console.log(outputPath);
        // Stelle sicher, dass das Verzeichnis existiert
        ensureDirectoryExistence(outputPath);

        // Schreibe die konvertierte Datei in das Zielverzeichnis
        fs.writeFileSync(outputPath, file.data);
    });
}

function ensureDirectoryExistence(filePath) {
    const dir = path.dirname(filePath);
    if (!fs.existsSync(dir)) {
        fs.mkdirSync(dir, { recursive: true });
    }
}

function watchImg() {
    gulp.watch(config.watch.img, gulp.series(buildImg))
}

async function cleanDist() {
    deleteSync([config.del.dist]);
}
async function copyPublic(){
    await gulp.src(config.watch.srcPublic)
        .pipe(gulp.dest(config.dist + '/' + config.app))
}

function publish(){
    deleteSync([config.publ]);
    gulp.src(config.watch.dist)
        .pipe(gulp.dest(config.publ))
}

export { clean, build, watch };