GET THE LATEST TRENDS IN DIGITAL MARKETING!


Digitale Trends, Best Practices und Marketing-Inspirationen – alle zwei Wochen als Newsletter. Sie können sich natürlich jederzeit mit nur einem Klick wieder abmelden.

Danke, wir sind über jedes Feedback dankbar


Unser Ziel ist es diese Webseite ständig besser und attraktiver zu machen. Her mit deinen Anregungen!

Info

  • Lesedauer:
    8 min
  • Datum:
    11.6.2019

Tags

#performance #general #coding

Follow us!

Serverless Website - Automatisierte Prozesse mit Gulp (Part 2)

Wie in unserem vorherigen Post über unsere Webseite ohne sogenanntes Backend beschrieben, benutzen wir für unsere automatisierten Prozesse das Toolkit Gulp!

Aber was ist Gulp?

Gulp ist ein open-source Toolkit, basierend auf Node.js und npm, um nervige und zeitraubende Tasks für effiziente Frontend Entwicklung zu automatisieren.
Hier mal die ersten Schritte die notwendig sind um Gulp in einem Projekt einzusetzen.

1. Bereitet euren Rechner vor!

Stellt sicher, dass Node.js auf eurem Rechner installiert ist. Falls nicht, hier könnt ihr die aktuelle Version herunterladen: https://nodejs.org/

2. Erstellt eine package.json Datei!

Nachdem Node.js installiert ist, braucht es eine package.json Datei. Darin sind die npm Pakete enthalten die für euer Projekt benötigt werden. Es sollte dann so in der Art aussehen:

 {
  "name": "monacofriends",
  "description": "Full Service Agentur München",
  "version": "2.0.2",
  "homepage": "https://www.monacofriends.com",
  "author": "Monaco Friends",
  "license": "Monaco Friends GmbH",
  "private": true,
  "devDependencies": {
    "gulp": "^4.0.0",
    "gulp-autoprefixer": "^4.1.0",
    "gulp-breadcrumbs": "0.0.1",
    "gulp-clean": "^0.3.2",
    "gulp-clip-empty-files": "^0.1.2",
    "gulp-concat": "^2.6.1",
    "gulp-connect": "^5.6.1",
    "gulp-csso": "^3.0.1",
    "gulp-data": "^1.3.1",
    "gulp-fs": "0.0.2",
    "gulp-imagemin": "^5.0.3",
    "gulp-install": "^1.1.0",
    "gulp-load-plugins": "^1.5.0",
    "gulp-nunjucks": "^4.0.0",
    "gulp-nunjucks-render": "^2.2.2",
    "gulp-open": "^3.0.1",
    "gulp-sass": "^4.0.2",
    "gulp-sourcemaps": "^2.6.3",
    "gulp-swig": "^0.8.0",
    "gulp-terser": "^1.1.5",
    "run-sequence": "^2.2.1",
    "webpack": "^4.29.6"
  },
  "dependencies": {
    "acorn": "^6.1.1",
    "aos": "^2.3.4",
    "browser-sync": "^2.26.3",
    "cookies-eu-banner": "^1.2.14",
    "gridifier": "^2.0.3",
    "gulp-cache": "^1.0.2",
    "gulp-clean-css": "^4.0.0",
    "gulp-compress": "0.0.9",
    "gulp-flatmap": "^1.0.2",
    "gulp-html-minifier": "^0.1.8",
    "gulp-html-minify": "0.0.14",
    "gulp-htmlmin": "^5.0.1",
    "gulp-merge-css": "^1.0.2",
    "gulp-merge-json": "^1.3.1",
    "gulp-postcss": "^8.0.0",
    "gulp-prism": "^1.2.0",
    "gulp-rename": "^1.4.0",
    "gulp-revert-path": "^2.0.0",
    "gulp-sitemap": "^5.1.0",
    "gulp-twig": "^1.2.0",
    "gulp-uglify-es": "^1.0.4",
    "gulp-update": "0.0.2",
    "gulp-util": "^3.0.8",
    "gulp-webp": "^4.0.1",
    "gulp4": "^4.0.3",
    "htmlmin": "0.0.7",
    "imagemin-pngquant": "^6.0.0",
    "imagemin-webp": "^5.0.0",
    "instafeed.js": "^1.4.1",
    "isotope-layout": "^3.0.6",
    "load-json-file": "^5.1.0",
    "lozad": "^1.7.0",
    "merge-stream": "^1.0.1",
    "natives": "^1.1.6",
    "nunjucks": "^3.1.4",
    "postcss-uncss": "^0.16.1",
    "prismjs": "^1.15.0",
    "pump": "^3.0.0",
    "resize-image": "^0.1.0",
    "sitemap-generator": "^8.3.2",
    "uglify-es": "github:mishoo/UglifyJS2#harmony",
    "uglify-js-es6": "^2.8.9",
    "uglifyjs-webpack-plugin": "^2.0.1",
    "uncss": "^0.16.2"
  }
}


3. Jetzt wird es Zeit für die gulpfile.js und den benötigten Code

Nachdem die Datei gulpfile.js erstellt wurde, können wir den Code hinzufügen, der die eigentliche Arbeit machen soll. Diese Datei beginnt mit der Deklaration der npm Module, welche für die folgenden Build Prozesse benötigt werden .


  var gulp    = require('gulp');
  var path         = require('path');
  var browserSync = require('browser-sync');
  var sass         = require('gulp-sass');
  var autoprefixer = require('gulp-autoprefixer');
  var sourcemaps   = require('gulp-sourcemaps');
  var open         = require('gulp-open');
  var compress         = require('gulp-compress');
  var swig = require('gulp-swig');
  var csso = require('gulp-csso');
  var merge = require('gulp-merge-css');
  const nunjucks = require('gulp-nunjucks');
  ...


In unserem Fall wird mehr gemacht als nur die dynamischen Nunjucks Dateien aus dem vorherigen Serverless Post in valides HTML zu automatisieren..
Viele der Tasks sind aus unterschiedliche Webprojekten sicherlich bekannt und können jedem Projekt einen Mehrwert verschaffen.

  • Automatisches Erstellen aller Blogbeiträge inklusive URL-Pfad und Routing aus einem JSON File
  • Automatisches Erstellen von AMP Dateien aus den Blogbeiträgen
  • Kompilierung der SASS Files in valides CSS
  • Komprimierung der Quellcodes
  • Minifizierung aller Bilder und Bereitstellung als webp Datei
  • Komprimierung aller CSS und JS Dateien in eine minifizierte Datei
  • Automatisierte Erstellung einer Sitemap
  • Entfernung von unbenutztem Quellcode (z.Bsp.: CSS), usw.

In diesem Post wollen wir aber bei unserer Intention bleiben, die dynamischen Nunjucks Templates zu rendern um eine komplette Webseite daraus zu erstellen. Diese paar Zeilen sind der komplette Code dafür:



  /* Gulp Nunjucks */
gulp.task('nunjucks', function() {
    return gulp.src(Paths.NJK)
    // Renders template with nunjucks
        .pipe(nunjucksRender({
            path: ['src'],
            manageEnv: manageEnvironment,
            data: require('./dist/combined.json')
        }))
        // output files in app folder
        .pipe(htmlmin({
            collapseWhitespace: true,
            removeComments: true,
            minifyCSS: true,
            minifyJS: true
           }))
        .pipe(gulp.dest(Paths.DIST))
});

Alles was dieses Javascript macht, ist aus den Sourcedateien das Nunjucks zu rendern und über den Befehl pipe es als komprimiertes HTML in den Destination Pfad zu speichern. Typischerweise greift der Server auf alle Dateien des dist Ordners zu und lässt die Webanwendung dort laufen. Zusätzlich werden noch ein paar Variablen aus der combined.json in die Umgebungsvariablen geschrieben, damit diese in Nunjucks zu verwenden sind. Viel mehr macht dieser Codeschnipsel dann eigentlich auch nicht.
Selbstverständlich lassen sich jede Menge unterschiedliche Prozesse in dem gulpfile.js festhalten. Natürlich individuell für die Anforderungen des Projekts.

4. Weiter gehts: Entwicklungsumgebung einrichten!

  • Terminal Fenster öffnen
  • In den Ordner des gulpfile.js und der package.json wechseln
  • npm install aufrufen

Dieser Befehl installiert alle in der package.json aufgeführten Paktete und sollte einen Ordner namens node_modules erstellen.

5. Ordnerstruktur erstellen!

Erstellt jetzt die korrekte Ordnerstruktur mit src, assets, etc Ordnern

6. GULP Kommandos ausführen!

Unser Kommando für den obrigen Task über das Terminal lautet


  gulp nunjucks

Falls man mehrere Tasks hat, können diese auch in einem Befehl asynchron ausgeführt werden.


gulp.task('default',
    gulp.series(gulp.parallel('nunjucks','compile:scss', 'compile:css','seo','blog+amp','js', 'server', 'watch','sitemap')),
    function (){
  gulp.src(Paths.DIST)
    .pipe(open({uri: 'http://localhost:9001/'}));
});

    

Diese Anweisung führt alle Tasks aus -> schreibt die korrekten Files in den Distribution Ordner -> und öffnet die Anwendung lokal!

So, und jetzt viel Spaß beim Automatisieren!

In dem Blogbetrag sind natürlich nur kleine Teilbereiche eines kompletten Projekts beschrieben und soll dem allgemeinen Verständnis dienen.

Wer ein komplettes und funktionierendes Projekt mit Gulp erstellen will, findet im Internet sicher viele Tutorials - Übung macht den Meister! Oder frag uns

Zugegebenermaßen ist GULP auch nicht mehr der aller neueste Stand und webpack vereinfacht mittlerweile noch mehr, aber es ist ein wunderbares Tool um komplexe und wiederkehrende Prozesse und Entwicklungsarbeit zu vereinfachen und zu automatisieren.

Do not miss out!

Bekommen Sie jetzt alle digitalen News auch direkt in Ihr Postfach.

Das wird Sie auch interessieren!

#performance   #usability   #seo  

Die 5 größten Fehler vor dem Relaunch

Wirklich an alles gedacht? Mit dieser einfachen Checkliste helft Ihr Euch und Eurem Kunden! Jeder, der schonmal an einem digitalen Projekt gearbeitet hat, wird wissen, dass Planung das A und O ist.

#performance   #onlinemarketing  

Die 3 Schritte für einen erfolgreichen Sales Funnel

ToFu/ MoFu - Was ist das denn bitte? Diese Prinzipien sollte jeder kennen, der die digitale Welt als seine geschäftliche Zukunft betrachtet.

#performance   #general   #coding  

Serverless Website - Ein Fallbeispiel mit Nunjucks (Part 1)

Langsame CMS Systeme mit ewigen Ladezeiten aufgrund schlechter Datenbankabfragen. Muss das wirklich sein? Wir zeigen am Beispiel unserer Seite eine Variante ohne Content Management System