[TASK] HTML: Add html partials and new checks

Author: M-arcus

.eslintrc

@@ -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
+```

.sass-lint.yml

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

README.md

@@ -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);

gulpfile.config.js

@@ -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",

gulpfile.js

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

package.json

@@ -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/css/style.css

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