updated project to build with gulpjs

.gitignore

@@ -1,2 +1,6 @@
 .idea
 *.iml
+
+dist/
+
+node_modules/

.gitlab-ci.yml

@@ -2,10 +2,27 @@ stages:
   - build
   - deploy
 
+build:
+  image: node
+  stage: build
+  dependencies: []
+  before_script:
+    - rm package-lock.json
+  script:
+    - npm run build
+  cache:
+    paths:
+      - node_modules/
+  artifacts:
+    paths:
+      - dist/
+
 deploy:
   image: alpine
   stage: deploy
+  dependencies:
+    - build
   before_script:
-    - apk add lftp
+    - which lftp || ( apk --update add lftp )
   script:
     - lftp -e "mirror -R ./ samuel-philipp.de/; bye" -u $FTP_USERNAME,$FTP_PASSWORD $FTP_HOST

css/app.css

@@ -1,105 +0,0 @@
-@font-face {
-    font-family: 'Minotaur';
-    src: local('Minotaur Phatte'), url(../font/minotaur.ttf) format('truetype');
-}
-
-body {
-    color: #fff;
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-}
-
-body {
-    padding: 0;
-    margin: 0;
-}
-
-.image {
-    display: block;
-    background-repeat: no-repeat;
-    background-position: center center;
-    background-size: cover;
-    position: fixed;
-    top: -25px;
-    left: -25px;
-    width: calc(100% + 50px);
-    height: calc(100% + 50px);
-    z-index: 0;
-}
-
-#developer {
-    background-image: url('../img/sp-codes.png');
-}
-
-#magician {
-    background-image: url('../img/sp-magic_overlay.png');
-}
-
-.headers {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    /*justify-content: stretch;*/
-    align-items: stretch;
-    /*align-content: stretch;*/
-    text-align: center;
-}
-
-.headers .magician {
-    color: #000000;
-    font-family: "Minotaur", cursive;
-    font-weight: normal;
-    font-size: 5rem;
-    text-shadow: 0 0 1rem #ffffff;
-}
-
-.headers .developer {
-    color: #ffffff;
-    font-family: "Minotaur", monospace;
-    font-weight: bold;
-    font-size: 5rem;
-    text-shadow: 0 0 1rem #000000;
-}
-
-.headers a {
-    text-decoration: none;
-}
-
-.headers .codes {
-    flex-grow: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.headers .magic {
-    flex-grow: 0.6;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.headers .padding {
-    flex-grow: 1.3;
-}
-
-.menu {
-    position: fixed;
-    right: 0;
-    bottom: 0;
-    background-color: rgba(255, 255, 255, 0.6);
-    border-top: 1px solid #ffffff;
-    border-left: 1px solid #ffffff;
-    border-top-left-radius: 8px;
-}
-
-.menu a {
-    color: #000000;
-}
-
-.menu a:hover {
-    color: #222222;
-}

css/style-legal.css

@@ -1,5 +0,0 @@
-body {
-    background-image: url("../img/bg.png");
-    padding: 2%;
-    color: #fff;
-}

gulpfile.js

@@ -0,0 +1,254 @@
+/**
+ * Settings
+ * Turn on/off build features
+ */
+var settings = {
+    clean: true,
+    scripts: true,
+    styles: true,
+    copy: true,
+    reload: true
+};
+
+
+/**
+ * Paths to project folders
+ */
+var paths = {
+    input: 'src/',
+    output: 'dist/',
+    scripts: {
+        input: 'src/js/*.js',
+        output: 'dist/js/'
+    },
+    styles: {
+        input: 'src/scss/*.scss',
+        output: 'dist/css/'
+    },
+    copy: {
+        input: [
+            'src/*.html',
+            'src/.htaccess',
+            'src/{img,font}/**/*',
+            'node_modules/@fortawesome/fontawesome-free/*fonts/**/*'
+        ],
+        output: 'dist/'
+    },
+    reload: './dist/'
+};
+
+
+/**
+ * Template for banner to add to file headers
+ */
+
+var banner = {
+    main:
+        '/*!' +
+        ' <%= package.name %> v<%= package.version %>' +
+        ' | (c) ' + new Date().getFullYear() + ' <%= package.author.name %>' +
+        ' | <%= package.license %> License' +
+        ' | <%= package.repository.url %>' +
+        ' */\n'
+};
+
+
+/**
+ * Gulp Packages
+ */
+// General
+var {src, dest, watch, series, parallel} = require('gulp');
+var del = require('del');
+var flatmap = require('gulp-flatmap');
+var lazypipe = require('lazypipe');
+var rename = require('gulp-rename');
+var header = require('gulp-header');
+var package = require('./package.json');
+
+// Scripts
+var concat = require('gulp-concat');
+var uglify = require('gulp-terser');
+var optimizejs = require('gulp-optimize-js');
+
+// Styles
+var sass = require('gulp-sass');
+var postcss = require('gulp-postcss');
+var prefix = require('autoprefixer');
+var minify = require('cssnano');
+var tildeImporter = require('node-sass-tilde-importer');
+
+// BrowserSync
+var browserSync = require('browser-sync');
+
+
+/**
+ * Gulp Tasks
+ */
+// Remove pre-existing content from output folders
+var cleanDist = function (done) {
+
+    // Make sure this feature is activated before running
+    if (!settings.clean) return done();
+
+    // Clean the dist folder
+    del.sync([
+        paths.output
+    ]);
+
+    // Signal completion
+    return done();
+
+};
+
+// Repeated JavaScript tasks
+var jsTasks = lazypipe()
+    .pipe(header, banner.main, {package: package})
+    .pipe(optimizejs)
+    .pipe(dest, paths.scripts.output)
+    .pipe(rename, {suffix: '.min'})
+    .pipe(uglify)
+    .pipe(optimizejs)
+    .pipe(header, banner.main, {package: package})
+    .pipe(dest, paths.scripts.output);
+
+// minify, and concatenate scripts
+var buildScripts = function (done) {
+    // Make sure this feature is activated before running
+    if (!settings.scripts) return done();
+
+    // Run tasks on script files
+    return src(paths.scripts.input)
+        .pipe(flatmap(function(stream, file) {
+
+            // If the file is a directory
+            if (file.isDirectory()) {
+
+                // Setup a suffix variable
+                var suffix = '';
+
+                // If separate polyfill files enabled
+                if (settings.polyfills) {
+
+                    // Update the suffix
+                    suffix = '.polyfills';
+
+                    // Grab files that aren't polyfills, concatenate them, and process them
+                    src([file.path + '/*.js', '!' + file.path + '/*' + paths.scripts.polyfills])
+                        .pipe(concat(file.relative + '.js'))
+                        .pipe(jsTasks());
+
+                }
+
+                // Grab all files and concatenate them
+                // If separate polyfills enabled, this will have .polyfills in the filename
+                src(file.path + '/*.js')
+                    .pipe(concat(file.relative + suffix + '.js'))
+                    .pipe(jsTasks());
+
+                return stream;
+
+            }
+
+            // Otherwise, process the file
+            return stream.pipe(jsTasks());
+
+        }));
+
+};
+
+// Process, and minify Sass files
+var buildStyles = function (done) {
+    // Make sure this feature is activated before running
+    if (!settings.styles) return done();
+
+    // Run tasks on all Sass files
+    return src(paths.styles.input)
+        .pipe(sass({
+            importer: tildeImporter,
+            outputStyle: 'expanded',
+            sourceComments: true
+        }))
+        .pipe(postcss([
+            prefix({
+                cascade: true,
+                remove: true
+            })
+        ]))
+        .pipe(header(banner.main, {package: package}))
+        .pipe(dest(paths.styles.output))
+        .pipe(rename({suffix: '.min'}))
+        .pipe(postcss([
+            minify({
+                discardComments: {
+                    removeAll: true
+                }
+            })
+        ]))
+        .pipe(dest(paths.styles.output));
+
+};
+
+// Copy static files into output folder
+var copyFiles = function (done) {
+
+    // Make sure this feature is activated before running
+    if (!settings.copy) return done();
+
+    // Copy static files
+    return src(paths.copy.input)
+        .pipe(dest(paths.copy.output));
+
+};
+
+// Watch for changes to the src directory
+var startServer = function (done) {
+    // Make sure this feature is activated before running
+    if (!settings.reload) return done();
+
+    // Initialize BrowserSync
+    browserSync.init({
+        server: {
+            baseDir: paths.reload
+        }
+    });
+
+    // Signal completion
+    done();
+
+};
+
+// Reload the browser when files change
+var reloadBrowser = function (done) {
+    if (!settings.reload) return done();
+    browserSync.reload();
+    done();
+};
+
+// Watch for changes
+var watchSource = function (done) {
+    watch(paths.input, series(exports.default, reloadBrowser));
+    done();
+};
+
+
+/**
+ * Export Tasks
+ */
+// Default task
+// gulp
+exports.default = series(
+    cleanDist,
+    parallel(
+        buildScripts,
+        buildStyles,
+        copyFiles
+    )
+);
+
+// Watch and reload
+// gulp watch
+exports.watch = series(
+    exports.default,
+    startServer,
+    watchSource
+);

package.json

@@ -0,0 +1,36 @@
+{
+  "name": "samuel-philipp.de",
+  "version": "1.0.0",
+  "description": "website for samuel-philipp.de",
+  "scripts": {
+    "start": "gulp watch",
+    "build": "gulp"
+  },
+  "author": "samuel-p",
+  "repository": {
+    "type": "git",
+    "url": "https://gitlab.com/samuel-p/samuel-philipp.de"
+  },
+  "devDependencies": {
+    "gulp": "4.0.2",
+    "del": "3.0.0",
+    "lazypipe": "1.0.1",
+    "gulp-flatmap": "1.0.2",
+    "gulp-header": "2.0.5",
+    "gulp-rename": "1.4.0",
+    "gulp-concat": "2.6.1",
+    "gulp-terser": "1.1.7",
+    "gulp-optimize-js": "1.1.0",
+    "gulp-sass": "4.0.2",
+    "gulp-postcss": "8.0.0",
+    "cssnano": "4.1.10",
+    "autoprefixer": "9.6.1",
+    "browser-sync": "2.26.7",
+    "node-sass-tilde-importer": "^1.0.2"
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome-free": "^5.11.2",
+    "bootstrap": "^4.3.1",
+    "jquery": "^3.4.1"
+  }
+}

src/imprint.html

@@ -4,14 +4,11 @@
     <meta charset="UTF-8">
     <title>Samuel Philipp - Impressum</title>
     <link rel="shortcut icon" href="img/samuel.png">
-
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
-          integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
+    <link rel="stylesheet" href="css/main.min.css">
-    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"
-          integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
-    <link rel="stylesheet" href="css/style-legal.css" type="text/css" media="screen">
 </head>
-<body>
+<body class="legal">
 <h1>Impressum</h1>
 
 <h2>Angaben gem&auml;&szlig; &sect; 5 TMG</h2>

src/index.html

@@ -4,33 +4,10 @@
     <title>Samuel Philipp</title>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
     <link rel="shortcut icon" href="img/samuel.png">
-
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
-          integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
+    <meta name="author" content="Samuel Philipp">
-    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"
+    <link rel="stylesheet" href="css/main.min.css">
-          integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
-    <link rel="stylesheet" href="css/app.css" type="text/css" media="screen"/>
-
-    <!-- Matomo -->
-    <script type="text/javascript">
-        var _paq = _paq || [];
-        /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
-        _paq.push(['trackPageView']);
-        _paq.push(['enableLinkTracking']);
-        (function () {
-            var u = "//matomo.sp-codes.de/";
-            _paq.push(['setTrackerUrl', u + 'piwik.php']);
-            _paq.push(['setSiteId', '1']);
-            var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0];
-            g.type = 'text/javascript';
-            g.async = true;
-            g.defer = true;
-            g.src = u + 'piwik.js';
-            s.parentNode.insertBefore(g, s);
-        })();
-    </script>
-    <noscript><p><img src="//matomo.sp-codes.de/piwik.php?idsite=1&rec=1" style="border:0;" alt=""/></p></noscript>
-    <!-- End Matomo Code -->
 </head>
 <body>
 <div id="developer" class="image"></div>
@@ -61,6 +38,6 @@
     <div><a href="privacy.html"><span
             class="fas fa-user-secret mr-2"></span>Privacy</a></div>
 </div>
-<script type="text/javascript" src="js/app.js"></script>
+<script type="text/javascript" src="js/main.min.js"></script>
 </body>
 </html>

src/privacy.html

@@ -4,14 +4,11 @@
     <meta charset="UTF-8">
     <title>Samuel Philipp - Datenschutzerklärung</title>
     <link rel="shortcut icon" href="img/samuel.png">
-
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
-          integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
+    <link rel="stylesheet" href="css/main.min.css">
-    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"
-          integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
-    <link rel="stylesheet" href="css/style-legal.css" type="text/css" media="screen">
 </head>
-<body>
+<body class="legal">
 <h2>Datenschutzerklärung</h2>
 <h3 id="dsg-general-intro"></h3>
 <p>Diese Datenschutzerklärung klärt Sie über die Art, den Umfang und Zweck der Verarbeitung von personenbezogenen Daten

src/scss/main.scss

@@ -0,0 +1,114 @@
+@import "~bootstrap/scss/bootstrap-grid";
+@import "~bootstrap/scss/bootstrap-reboot";
+@import "~bootstrap/scss/utilities/align";
+@import "~bootstrap/scss/utilities/spacing";
+@import "~@fortawesome/fontawesome-free/scss/fontawesome";
+@import "~@fortawesome/fontawesome-free/scss/solid";
+@import "~@fortawesome/fontawesome-free/scss/brands";
+@import "~@fortawesome/fontawesome-free/scss/regular";
+
+@font-face {
+  font-family: 'Minotaur';
+  src: local('Minotaur Phatte'), url(../font/minotaur.ttf) format('truetype');
+}
+
+body {
+  color: #fff;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  padding: 0;
+  margin: 0;
+
+  &.legal {
+    background-image: url("../img/bg.png");
+    padding: 2%;
+  }
+}
+
+.image {
+  display: block;
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: cover;
+  position: fixed;
+  top: -25px;
+  left: -25px;
+  width: calc(100% + 50px);
+  height: calc(100% + 50px);
+  z-index: 0;
+}
+
+#developer {
+  background-image: url('../img/sp-codes.png');
+}
+
+#magician {
+  background-image: url('../img/sp-magic_overlay.png');
+}
+
+.headers {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  text-align: center;
+}
+
+.headers .magician {
+  color: #000000;
+  font-family: "Minotaur", cursive;
+  font-weight: normal;
+  font-size: 5rem;
+  text-shadow: 0 0 1rem #ffffff;
+}
+
+.headers .developer {
+  color: #ffffff;
+  font-family: "Minotaur", monospace;
+  font-weight: bold;
+  font-size: 5rem;
+  text-shadow: 0 0 1rem #000000;
+}
+
+.headers a {
+  text-decoration: none;
+}
+
+.headers .codes {
+  flex-grow: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.headers .magic {
+  flex-grow: 0.6;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.headers .padding {
+  flex-grow: 1.3;
+}
+
+.menu {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(255, 255, 255, 0.6);
+  border-top: 1px solid #ffffff;
+  border-left: 1px solid #ffffff;
+  border-top-left-radius: 8px;
+}
+
+.menu a {
+  color: #000000;
+}
+
+.menu a:hover {
+  color: #222222;
+}