[TASK] HTML: Add html partials and new checks

README.md

@@ -1,15 +1,24 @@
-## License
+# 🏝️ Marynah 🏝️
 
-See [here](https://github.com/KonradRolof/DropLoad/blob/master/LICENSE)
+A simple GULP setup
 
-## Install
+## Installation
 
+Clone the repo into a folder, navigate into the folder and execute 
+```
 yarn install
+```
 
-## Start
+## For development
 
-### For building all files
-yarn start
-
-### For developing
+This command generates all files, opens the page in the browser and watches for changes 
+```
 yarn dev
+```
+
+## For building
+
+This command generates all files
+```
+yarn start
+```

gulpfile.config.js

@@ -22,7 +22,7 @@ module.exports = {
   html: {
     src: 'src/*.html',
     dist: 'dist',
-    watch: 'src/*.html'
+    watch: 'src/**/*.html'
   },
   images: {
     src: 'src/img/**/*.*',

gulpfile.js

@@ -16,6 +16,7 @@ const gulp = require('gulp');
 const del = require('del');
 const htmlmin = require('gulp-htmlmin');
 const concat = require('gulp-concat');
+const injectPartials = require('gulp-inject-partials');
 
 // load config
 const CONFIG = require('./gulpfile.config');
@@ -42,37 +43,42 @@ function browserSyncReload(done) {
 }
 
 // compile styles specific for DropLoad
-function dlStyles() {
-  return gulp
-      .src(CONFIG.styles.src)
-      .pipe(plumber())
-      // normal file
-      .pipe(sourceMaps.init())
-      .pipe(gulpSass({ outputStyle: 'expanded' }))
-      .pipe(gulp.dest(CONFIG.styles.dist))
-      // minified versions
-      .pipe(rename({ suffix: '.min' }))
-      .pipe(postCSS([autoprefixer(['last 2 versions']), cssNano()]))
-      .pipe(gulp.dest(CONFIG.styles.dist))
-      // concatenated
-      .pipe(concat('app.css'))
-      .pipe(gulp.dest(CONFIG.styles.dist))
-      .pipe(browserSync.stream());
+function compileStyles() {
+  return (
+    gulp
+        .src(CONFIG.styles.src)
+        .pipe(plumber())
+        // normal file
+        .pipe(sourceMaps.init())
+        .pipe(gulpSass({ outputStyle: 'expanded' }))
+        .pipe(gulp.dest(CONFIG.styles.dist))
+        // minified versions
+        .pipe(rename({ suffix: '.min' }))
+        .pipe(postCSS([autoprefixer(['last 2 versions']), cssNano()]))
+        .pipe(gulp.dest(CONFIG.styles.dist))
+        // concatenated
+        .pipe(concat('app.css'))
+        .pipe(gulp.dest(CONFIG.styles.dist))
+        .pipe(browserSync.stream())
+  );
 }
 
 // generate images
 function copyImages() {
-  return gulp.src(CONFIG.images.src)
-      .pipe(changed(CONFIG.images.dist))
-      .pipe(gulp.dest(CONFIG.images.dist))
-      .pipe(imagemin({
-        optimizationLevel: 5,
-        progressive: true,
-        svgoPlugins: [{ removeViewBox: false }],
-        interlaced: true
-      }))
-      .pipe(rename({ suffix: '_minified' }))
-      .pipe(gulp.dest(CONFIG.images.dist));
+  return (
+    gulp.src(CONFIG.images.src)
+        .pipe(changed(CONFIG.images.dist))
+        .pipe(gulp.dest(CONFIG.images.dist))
+        .pipe(imagemin({
+          optimizationLevel: 5,
+          progressive: true,
+          svgoPlugins: [{ removeViewBox: false }],
+          interlaced: true
+        }))
+        .pipe(rename({ suffix: '_minified' }))
+        .pipe(gulp.dest(CONFIG.images.dist))
+        .pipe(browserSync.stream())
+  );
 }
 
 // generate scripts
@@ -96,21 +102,12 @@ function scripts() {
   );
 }
 
-
-// file watchers
-function watchFiles() {
-  gulp.watch(CONFIG.styles.watch, gulp.parallel(dlStyles));
-  gulp.watch(CONFIG.scripts.watch, gulp.parallel(scripts));
-  gulp.watch(CONFIG.html.watch, html, browserSyncReload);
-  gulp.watch(CONFIG.fonts.watch, fonts, browserSyncReload);
-  gulp.watch(CONFIG.css.watch, copyCss, browserSyncReload);
-}
-
 // copy and minify html
 function copyHtml() {
   return (
     gulp
         .src(CONFIG.html.src)
+        .pipe(injectPartials())
         .pipe(gulp.dest(CONFIG.html.dist))
         .pipe(htmlmin({ collapseWhitespace: true }))
         .pipe(rename({ suffix: '_min' }))
@@ -135,11 +132,21 @@ function copyCss() {
     gulp
         .src(CONFIG.css.src)
         .pipe(gulp.dest(CONFIG.css.dist))
+        .pipe(browserSync.stream())
   );
 }
 
+// file watchers
+function watchFiles() {
+  gulp.watch(CONFIG.styles.watch, compileStyles, browserSyncReload);
+  gulp.watch(CONFIG.scripts.watch, scripts, browserSyncReload);
+  gulp.watch(CONFIG.html.watch, html, browserSyncReload);
+  gulp.watch(CONFIG.fonts.watch, fonts, browserSyncReload);
+  gulp.watch(CONFIG.css.watch, styles, browserSyncReload);
+}
+
 const js = gulp.parallel(scripts);
-const styles = gulp.parallel(dlStyles, copyCss);
+const styles = gulp.parallel(compileStyles, copyCss);
 const images = gulp.parallel(copyImages);
 const html = gulp.parallel(copyHtml);
 const fonts = gulp.parallel(copyFonts);

package.json

@@ -24,6 +24,7 @@
     "gulp-environments": "^0.1.2",
     "gulp-htmlmin": "^5.0.1",
     "gulp-imagemin": "^5.0.3",
+    "gulp-inject-partials": "^1.0.5",
     "gulp-plumber": "^1.2.1",
     "gulp-postcss": "^8.0.0",
     "gulp-rename": "^1.4.0",

src/css/style.css

@@ -1,3 +1,3 @@
-* {
-    color: red;
+.check-css-folder {
+    color: green;
 }

src/html/_checks.html

@@ -0,0 +1,16 @@
+<h2>Checks</h2>
+<div class="check-css-folder">
+    <p>If this text is green, the css folder was loaded correctly.</p>
+</div>
+<div class="check-scss-folder">
+    <p>If this text is green, the scss folder was loaded correctly.</p>
+</div>
+<div class="check-js-folder">
+    <p>If this text is green, the js folder was loaded correctly.</p>
+</div>
+<div class="check-img-folder">
+    <p>Original Image</p>
+    <img src="img/test.png" alt="The image was not loaded correctly or the image was not found.">
+    <p>Minified Image</p>
+    <img src="img/test_minified.png" alt="The minified image was not loaded correctly or the image was not found.">
+</div>

src/html/_hero.html

@@ -0,0 +1,4 @@
+<header>
+    <h1>🏝️ Marynah 🏝️</h1>
+    <p>A simple GULP setup</p>
+</header>

src/index.html

@@ -1,31 +1,15 @@
 <!DOCTYPE html>
-<html lang="en">
+<html>
 <head>
-    <meta charset="UTF-8">
-    <title>DropLoad</title>
+    <title>Marynah</title>
     <link rel="stylesheet" href="css/app.css">
     <link rel="stylesheet" href="css/style.css">
 </head>
 <body>
-    <header class="dld-header">
-        <div class="container">
-            <h1>DropLoad</h1>
-            <p>Create a drop element for easy file upload.</p>
-            <img src="img/screen.jpeg">
-        </div>
-    </header>
-    <main class="dld-main">
-        <div class="container">
-            <form action="#" method="post" class="dld-form" enctype="multipart/form-data">
-                <div class="dropload" id="dropLoadSingle">
-                    <div class="dl-fallback">
-                        <label for="file">Drop File to upload</label>
-                        <input type="file" id="file" accept="image/*">
-                    </div>
-                </div>
-            </form>
-        </div>
-    </main>
-    <script src="js/app.js"></script>
+<!-- partial:html/_hero.html -->
+<!-- partial -->
+<!-- partial:html/_checks.html -->
+<!-- partial -->
+<script src="js/app.js"></script>
 </body>
 </html>

src/js/main.js

@@ -1 +1 @@
-document.write('Hello');
+document.write('<style>.check-js-folder { color: green }</style>');