init

README.md

@@ -1,2 +1,70 @@
 # gulpfile-setup
 
+package.json:
+
+```json
+{
+  "dependencies": {
+    "@babel/plugin-transform-modules-commonjs": "^7.23.3",
+    "axios": "^1.6.7",
+    "concat": "^1.0.3",
+    "del": "^7.1.0",
+    "fs": "^0.0.1-security",
+    "fs-extra": "^11.2.0",
+    "get-google-fonts": "^1.2.2",
+    "gulp": ">=4",
+    "gulp-autoprefixer": "^9.0.0",
+    "gulp-clean-css": "^4.3.0",
+    "gulp-concat": "^2.6.1",
+    "gulp-ignore-errors": "^0.0.4",
+    "gulp-imagemin": "^9.0.0",
+    "gulp-plugin-extras": "^0.3.0",
+    "gulp-sass": "^5.1.0",
+    "gulp-sharp-responsive": "^0.4.1",
+    "imagemin": "^8.0.1",
+    "imagemin-gifsicle": "^7.0.0",
+    "imagemin-mozjpeg": "^10.0.0",
+    "imagemin-optipng": "^8.0.0",
+    "imagemin-svgo": "^10.0.1",
+    "imagemin-webp": "^8.0.0",
+    "path": "^0.12.7",
+    "plugin-error": "^2.0.1",
+    "pretty-bytes": "^6.1.1",
+    "sass": "^1.71.1",
+    "scss-framework": "file:../packages/sumedia-webdesign/scss-framework",
+    "sharp": "^0.33.2",
+    "vinyl-buffer": "^1.0.1",
+    "vinyl-source-stream": "^2.0.0",
+    "yargs": "^17.7.2"
+  },
+  "peerDependencies": {
+    "gulp": ">=4"
+  },
+  "peerDependenciesMeta": {
+    "gulp": {
+      "optional": true
+    }
+  },
+  "scripts": {
+    "clean": "gulp --cwd . --gulpfile gulp/clean.mjs",
+    "build": "gulp --cwd . --gulpfile gulp/build.mjs",
+    "watch": "gulp --cwd . --gulpfile gulp/watch.mjs"
+  },
+  "compilerOptions": {
+    "type": "module",
+    "module": "es6",
+    "target": "es6",
+    "esModuleInterop": true,
+    "lib": [
+      "es6",
+      "es5",
+      "es7",
+      "dom"
+    ]
+  },
+  "exclude": [
+    "node_modules"
+  ]
+}
+
+```

build.mjs

@@ -0,0 +1,2 @@
+import {build} from "./gulpfile.mjs"
+export default function(cb) { build(); cb(); };

clean.mjs

@@ -0,0 +1,2 @@
+import {clean} from "./gulpfile.mjs"
+export default function(cb) { clean(); cb(); };

config.mjs

@@ -0,0 +1,57 @@
+const tempDir = './var/tmp/gulp_font_download';
+const mode = 'dev'; //['dev', 'prod'].includes(yargs.argv.mode) ? yargs.agv.mode : 'dev';
+const app = 'frontend'; //'frontend'].includes(yargs.argv.app) ? yargs.argv.app : 'frontend';
+const src = './assets/src';
+const dist = './assets/dist';
+const publ = './public/resources/' + app;
+
+const config = {
+
+    tempDir: tempDir,
+    mode: mode,
+    app: app,
+    src: src,
+    dist: dist,
+    publ: publ,
+
+    watch: {
+        js: src + '/' + app + '/**/*.+(js)',
+        css: src + '/' + app + '/app.scss',
+        srcPublic: src + '/' + app + '/public/**/*',
+        dist: dist + '/' + app + '/**/*',
+        img: dist + '/' + app + '/**/*.+(jpg|jpeg|gif|png)',
+        'publish': dist + '/' + app + '/'
+    },
+    del: {
+        js: dist + '/' + app + '/**/*.+(js|js.map)',
+        css: dist + '/' + app + '/**/*.+(css|css.map)',
+        img: dist + '/' + app + '/**/*.+(jpg|jpeg|gif|png|webp)',
+        font: dist + '/' + app + '/fonts/',
+        dist: dist + '/' + app + '/*'
+    },
+
+    js: {
+        'lib': {
+            'axios': 'https://cdnjs.cloudflare.com/ajax/libs/axios/1.6.7/axios.js',
+            'vue': 'https://cdnjs.cloudflare.com/ajax/libs/vue/3.4.21/vue.global.js',
+            'jquery': 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.js',
+            'jquery-ui': 'https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js',
+            'requirejs': 'https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.js'
+        },
+        'app': [src + '/' + app + '/app.js']
+    },
+    css: {
+        'lib': {
+            'jquery-ui': 'https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/black-tie/jquery-ui.min.css',
+            'jquery-ui-theme': 'https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/black-tie/theme.min.css'
+        },
+        'app': [src + '/' + app + '/app.scss']
+    },
+    font: {
+        'Lato': 'https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap',
+        'Source Sans 3': 'https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap',
+        'font-awesome': 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css'
+    }
+}
+
+export {config}

gulpfile.mjs

@@ -0,0 +1,143 @@
+import yargs from 'yargs';
+import gulp from 'gulp';
+import gf from 'get-google-fonts';
+import sharp from 'gulp-sharp-responsive';
+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 {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(){
+    await gulp.src(config.watch.img)
+        .pipe(sharp({
+            formats: [{format: 'webp'}]
+        }))
+        .pipe(gulp.dest(config.dist + '/' + config.app));
+}
+
+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 };

watch.mjs

@@ -0,0 +1,2 @@
+import {watch} from "./gulpfile.mjs"
+export default function(cb) { watch(); cb(); };