Kontakt
diff --git a/03_js-dom/unterricht/tag21/03_website-gulp-js/dev/html/includes/head.html b/03_js-dom/unterricht/tag21/03_website-gulp-js/dev/html/includes/head.html
new file mode 100644
index 0000000..ecf2c87
--- /dev/null
+++ b/03_js-dom/unterricht/tag21/03_website-gulp-js/dev/html/includes/head.html
@@ -0,0 +1,16 @@
+
+
+
+
Webseite mit HTML & CSS (SCSS)
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/03_js-dom/unterricht/tag21/03_website-gulp-js/dev/html/includes/header-main.html b/03_js-dom/unterricht/tag21/03_website-gulp-js/dev/html/includes/header-main.html
new file mode 100644
index 0000000..f43aa5e
--- /dev/null
+++ b/03_js-dom/unterricht/tag21/03_website-gulp-js/dev/html/includes/header-main.html
@@ -0,0 +1,9 @@
+
+
+
+
+ JS course
+
+
diff --git a/03_js-dom/unterricht/tag21/03_website-gulp-js/dev/html/includes/menu-main.html b/03_js-dom/unterricht/tag21/03_website-gulp-js/dev/html/includes/menu-main.html
new file mode 100644
index 0000000..7b52ba5
--- /dev/null
+++ b/03_js-dom/unterricht/tag21/03_website-gulp-js/dev/html/includes/menu-main.html
@@ -0,0 +1,16 @@
+
+
+
diff --git a/03_js-dom/unterricht/tag21/03_website-gulp-js/dev/html/pages/contact.html b/03_js-dom/unterricht/tag21/03_website-gulp-js/dev/html/pages/contact.html
new file mode 100644
index 0000000..fce9804
--- /dev/null
+++ b/03_js-dom/unterricht/tag21/03_website-gulp-js/dev/html/pages/contact.html
@@ -0,0 +1,80 @@
+
+
+ @@include('head.html')
+
+ @@include('header-main.html')
+
+ @@include('menu-main.html')
+
+
+
Kontakt
+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, iste?
+
+
+
+
diff --git a/03_js-dom/unterricht/tag21/03_website-gulp-js/dev/html/pages/index.html b/03_js-dom/unterricht/tag21/03_website-gulp-js/dev/html/pages/index.html
new file mode 100644
index 0000000..42f8af0
--- /dev/null
+++ b/03_js-dom/unterricht/tag21/03_website-gulp-js/dev/html/pages/index.html
@@ -0,0 +1,28 @@
+
+
+ @@include('head.html')
+
+ @@include('header-main.html')
+
+ @@include('menu-main.html')
+
+
+
Webseite mit HTML & CSS (SCSS)
+
+ Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem, earum? Harum fuga itaque a natus tempora
+ dolor vero officiis eos tempore! Impedit nobis ea eum labore, aut assumenda nostrum dicta.
+
+
+
+
+
Card title
+
+ Some quick example text to build on the card title and make up the bulk of the card’s content.
+
+
Go somewhere
+
+
+
+
+
diff --git a/03_js-dom/unterricht/tag21/03_website-gulp-js/gulpfile.js b/03_js-dom/unterricht/tag21/03_website-gulp-js/gulpfile.js
index 614eaa5..2003bd5 100644
--- a/03_js-dom/unterricht/tag21/03_website-gulp-js/gulpfile.js
+++ b/03_js-dom/unterricht/tag21/03_website-gulp-js/gulpfile.js
@@ -22,6 +22,24 @@ task('reload', (done) => {
done();
});
+// HTML ========
+import fileInclude from 'gulp-file-include';
+task('html', (done) => {
+ const sourceFiles = ['./dev/html/pages/**/*.html', './dev/html/pages/*.html'];
+ const targetFolder = './';
+
+ src(sourceFiles)
+ .pipe(
+ fileInclude({
+ prefix: '@@',
+ basepath: './dev/html/includes',
+ }),
+ )
+ .pipe(dest(targetFolder));
+
+ done();
+});
+
// JS ===========
// npm install rollup @rollup/stream @rollup/plugin-replace @rollup/plugin-node-resolve @rollup/plugin-commonjs vinyl-source-stream vinyl-buffer -D
@@ -167,10 +185,11 @@ task('css', (done) => {
task('watcher', () => {
watch(['./dev/scss/**/*.+(scss|css)', './dev/scss/*.+(scss|css)'], series('css', 'reload'));
watch(['./dev/scripts/**/*.js', './dev/scripts/*.js'], series('js', 'reload'));
+ watch(['./dev/html/**/*.html'], series('html', 'reload'));
});
// Main DEV Task ========
-task('dev', series('css', 'js', parallel('server', 'watcher')));
+task('dev', series('css', 'js', 'html', parallel('server', 'watcher')));
// Test Tasks
diff --git a/03_js-dom/unterricht/tag21/03_website-gulp-js/index.html b/03_js-dom/unterricht/tag21/03_website-gulp-js/index.html
index fc69e53..007b9fb 100644
--- a/03_js-dom/unterricht/tag21/03_website-gulp-js/index.html
+++ b/03_js-dom/unterricht/tag21/03_website-gulp-js/index.html
@@ -1,48 +1,51 @@
-
-
-
Webseite mit HTML & CSS (SCSS)
-
+
+
+
Webseite mit HTML & CSS (SCSS)
+
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
- JS course
-
-
+
+
+
+ JS course
+
+
+
-
+
+
Contact
+
+
+
Webseite mit HTML & CSS (SCSS)
diff --git a/03_js-dom/unterricht/tag21/03_website-gulp-js/package-lock.json b/03_js-dom/unterricht/tag21/03_website-gulp-js/package-lock.json
index 166c0e3..918ab34 100644
--- a/03_js-dom/unterricht/tag21/03_website-gulp-js/package-lock.json
+++ b/03_js-dom/unterricht/tag21/03_website-gulp-js/package-lock.json
@@ -20,6 +20,7 @@
"esbuild": "^0.28.2",
"gulp": "^5.0.1",
"gulp-autoprefixer": "^10.0.0",
+ "gulp-file-include": "^2.3.0",
"gulp-sass": "^6.0.1",
"gulp-sourcemaps": "^3.0.0",
"npm-run-all": "^4.1.5",
@@ -3860,6 +3861,13 @@
"ieee754": "^1.2.1"
}
},
+ "node_modules/buffer-from": {
+ "version": "1.1.2",
+ "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
+ "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
+ "dev": true,
+ "license": "MIT"
+ },
"node_modules/bytes": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
@@ -4105,6 +4113,22 @@
"dev": true,
"license": "MIT"
},
+ "node_modules/concat-stream": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-2.0.0.tgz",
+ "integrity": "sha512-MWufYdFw53ccGjCA+Ol7XJYpAlW6/prSMzuPOTRnJGcGzuhLn4Scrz7qf6o8bROZ514ltazcIFJZevcfbo0x7A==",
+ "dev": true,
+ "engines": [
+ "node >= 6.0"
+ ],
+ "license": "MIT",
+ "dependencies": {
+ "buffer-from": "^1.0.0",
+ "inherits": "^2.0.3",
+ "readable-stream": "^3.0.2",
+ "typedarray": "^0.0.6"
+ }
+ },
"node_modules/connect": {
"version": "3.6.6",
"resolved": "https://registry.npmjs.org/connect/-/connect-3.6.6.tgz",
@@ -5326,6 +5350,13 @@
"node": ">= 10.13.0"
}
},
+ "node_modules/flatnest": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/flatnest/-/flatnest-1.0.1.tgz",
+ "integrity": "sha512-fw6V/6LdrkB/q/mW/8M4PfX9sDUo4k5UZ9vlRlTrsbhDrxbe51puGoGHOmfr5hAczTH/33Q4jzuDnOBerGaIlQ==",
+ "dev": true,
+ "license": "MIT"
+ },
"node_modules/flru": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/flru/-/flru-1.0.2.tgz",
@@ -5975,6 +6006,61 @@
"node": ">=10"
}
},
+ "node_modules/gulp-file-include": {
+ "version": "2.3.0",
+ "resolved": "https://registry.npmjs.org/gulp-file-include/-/gulp-file-include-2.3.0.tgz",
+ "integrity": "sha512-OoMq5QtXHYz6hu2dZm1OxravcqrPXGeCNvOtz+8/589zFKcdpKGGvFXz/Aw4hx8pKZqaS+oJusgKDVQ4dCzqSg==",
+ "dev": true,
+ "license": "MIT",
+ "dependencies": {
+ "balanced-match": "^1.0.0",
+ "concat-stream": "^2.0.0",
+ "extend": "^3.0.2",
+ "flatnest": "^1.0.0",
+ "json5": "^2.1.3",
+ "plugin-error": "^1.0.1",
+ "through2": "^4.0.2",
+ "vinyl": "^2.2.1"
+ }
+ },
+ "node_modules/gulp-file-include/node_modules/replace-ext": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/replace-ext/-/replace-ext-1.0.1.tgz",
+ "integrity": "sha512-yD5BHCe7quCgBph4rMQ+0KkIRKwWCrHDOX1p1Gp6HwjPM5kVoCdKGNhN7ydqqsX6lJEnQDKZ/tFMiEdQ1dvPEw==",
+ "dev": true,
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.10"
+ }
+ },
+ "node_modules/gulp-file-include/node_modules/through2": {
+ "version": "4.0.2",
+ "resolved": "https://registry.npmjs.org/through2/-/through2-4.0.2.tgz",
+ "integrity": "sha512-iOqSav00cVxEEICeD7TjLB1sueEL+81Wpzp2bY17uZjZN0pWZPuo4suZ/61VujxmqSGFfgOcNuTZ85QJwNZQpw==",
+ "dev": true,
+ "license": "MIT",
+ "dependencies": {
+ "readable-stream": "3"
+ }
+ },
+ "node_modules/gulp-file-include/node_modules/vinyl": {
+ "version": "2.2.1",
+ "resolved": "https://registry.npmjs.org/vinyl/-/vinyl-2.2.1.tgz",
+ "integrity": "sha512-LII3bXRFBZLlezoG5FfZVcXflZgWP/4dCwKtxd5ky9+LOtM4CS3bIRQsmR1KMnMW07jpE8fqR2lcxPZ+8sJIcw==",
+ "dev": true,
+ "license": "MIT",
+ "dependencies": {
+ "clone": "^2.1.1",
+ "clone-buffer": "^1.0.0",
+ "clone-stats": "^1.0.0",
+ "cloneable-readable": "^1.0.0",
+ "remove-trailing-separator": "^1.0.1",
+ "replace-ext": "^1.0.0"
+ },
+ "engines": {
+ "node": ">= 0.10"
+ }
+ },
"node_modules/gulp-plugin-extras": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/gulp-plugin-extras/-/gulp-plugin-extras-1.1.0.tgz",
@@ -9278,6 +9364,13 @@
"url": "https://github.com/sponsors/ljharb"
}
},
+ "node_modules/typedarray": {
+ "version": "0.0.6",
+ "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
+ "integrity": "sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==",
+ "dev": true,
+ "license": "MIT"
+ },
"node_modules/ua-parser-js": {
"version": "1.0.41",
"resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.41.tgz",
diff --git a/03_js-dom/unterricht/tag21/03_website-gulp-js/package.json b/03_js-dom/unterricht/tag21/03_website-gulp-js/package.json
index 91e9222..ef2169e 100644
--- a/03_js-dom/unterricht/tag21/03_website-gulp-js/package.json
+++ b/03_js-dom/unterricht/tag21/03_website-gulp-js/package.json
@@ -24,6 +24,7 @@
"esbuild": "^0.28.2",
"gulp": "^5.0.1",
"gulp-autoprefixer": "^10.0.0",
+ "gulp-file-include": "^2.3.0",
"gulp-sass": "^6.0.1",
"gulp-sourcemaps": "^3.0.0",
"npm-run-all": "^4.1.5",
- 
+ 
+