mpdude · polarbirke · Sep 19, 2025 · Sep 19, 2025 · Sep 19, 2025 · Sep 26, 2025
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
 .yarn
 node_modules
 vendor
+www
diff --git a/gulp-config.js b/gulp-config.js
@@ -0,0 +1,51 @@
+const argv = require('minimist')(process.argv.slice(2));
+
+// roll your own function if you need to use more or different plugins
+const { postCssPlugins } = require('./node_modules/webfactory-gulp-preset/config/postcss-plugins-default');
+
+module.exports = {
+    scripts: {
+        files: [
+            {
+                name: 'scripts',
+                inputPath: [
+                    'PATH_TO_PROJECT_ASSETS_DIR/js/scripts.js',
+                ],
+                destDir: 'js'
+            }
+        ],
+        watch: ['PATH_TO_PROJECT_ASSETS_DIR/assets/js/**/*.js'],
+    },
+    styles: {
+        files: [
+            {
+                name: 'simple.css',
+                files: [
+                    'bundles/app/scss/simple.scss',
+                ],
+                destDir: 'css'
+            },
+            {
+                name: 'pkg-test.css',
+                files: [
+                    'bundles/app/scss/test.scss',
+                ],
+                destDir: 'css'
+            }
+        ],
+        postCssPlugins: postCssPlugins,
+        sassCompiler: 'sass-embedded', // this passes Dart Sass to gulp-sass
+    },
+    stylelint: {
+        files: [
+            'PATH_TO_PROJECT_ASSETS_DIR/scss/**/*.scss'
+        ],
+        destDir: 'PATH_TO_PROJECT_ASSETS_DIR/scss'
+    },
+
+    "development": (argv.env || process.env.APP_ENV || 'development') === 'development',
+    "webdir": "www",
+    "libdir": "vendor", // composer deps directory, might be called "lib"
+    "tempdir": "tmp",
+    "npmdir": "node_modules"
+}
diff --git a/gulpfile.js b/gulpfile.js
@@ -0,0 +1,36 @@
+const gulp = require('gulp');
+const config = require('./gulp-config');
+const $ = require('./node_modules/webfactory-gulp-preset/plugins')(config); // loads all gulp-* modules in $.* for easy reference
+
+
+const { webpack } = require('./node_modules/webfactory-gulp-preset/tasks/webpack');
+const { stylepack } = require('./node_modules/webfactory-gulp-preset/tasks/stylepack');
+const { styles } = require('./node_modules/webfactory-gulp-preset/tasks/styles');
+const { browsersync } = require('./node_modules/webfactory-gulp-preset/tasks/browsersync');
+
+function js(cb) {
+    webpack(gulp, $, config);
+    cb();
+}
+
+function css(cb) {
+    styles(gulp, $, config);
+    cb();
+}
+
+function csswebpack(cb) {
+    stylepack(gulp, $, config);
+    cb();
+}
+
+function serve(cb) {
+    browsersync(gulp, $, config, css, js);
+    cb();
+}
+
+exports.js = js;
+exports.css = css;
+exports.csswebpack = csswebpack;
+exports.serve = serve;
+exports.compile = gulp.parallel(css, js);
+exports.default = gulp.series(gulp.parallel(css, js), serve);
diff --git a/package.json b/package.json
@@ -5,7 +5,8 @@
     "dies-das": "portal:vendor/dies/das",
     "lazysizes": "^3.0",
     "sass": "^1.92.1",
-    "slick-slider": "^1.8.2"
-  },
-  "type": "module"
+    "sass-embedded": "^1.92.1",
+    "slick-slider": "^1.8.2",
+    "webfactory-gulp-preset": "webfactory/webfactory-gulp-preset#webpack-sass-loader"
+  }
 }
diff --git a/src/index.html b/src/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8"/>
+    <meta content="width=device-width,initial-scale=1" name="viewport"/>
+    <title>Hello, world!</title>
+</head>
+<body>
+    <h1>Hello, world!</h1>
+    <div class="diese-klasse-gibt-es">
+        Test.
+    </div>
+</body>
+</html>
diff --git a/vendor/dies/das/style.scss b/vendor/dies/das/style.scss
@@ -1,8 +1,7 @@
 /* Hier beginnt style.scss aus dies-das */
 
 /* Das hier ist das baseline-reset aus v1.0.0, deklariert als Abhängigkeit von "dies/das". Man erkennt das auch daran, dass das entry file noch "baseline-reset.scss" heisst: */
-@import "pkg:@webfactoryde/baseline-reset/baseline-reset";
+@use "pkg:@webfactoryde/baseline-reset/baseline-reset";
 
 /* Hier folgt style.scss aus foo-bar */
-@import "pkg:foo-bar/style";
-
+@use "pkg:foo-bar/style";
diff --git a/vendor/foo/bar/style.scss b/vendor/foo/bar/style.scss
@@ -4,4 +4,4 @@
   Das hier ist das baseline-reset aus v1.1.0, deklariert als Abhängigkeit von "foo/bar".
   Das entry file heisst schon "index.scss", und es enthält auch das "video"-Element.
 */
-@import "pkg:@webfactoryde/baseline-reset";
+@use "pkg:@webfactoryde/baseline-reset";
diff --git a/www/bundles/app/scss/simple.scss b/www/bundles/app/scss/simple.scss
@@ -0,0 +1,11 @@
+body {
+    margin-inline: 0;
+}
+
+.diese-klasse-gibt-es {
+    color: green;
+}
+
+.diese-klasse-gibt-es-nicht {
+    color: red;
+}
diff --git a/test.scss → www/bundles/app/scss/test.scss b/test.scss → www/bundles/app/scss/test.scss