Recent Use Cases & Stories

Info

  • Lesedauer:
    8 min
  • Datum:
    11.6.2019

Tags

#DIGITALISIERUNG #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.

Genau ihr Ding?

Ist dieses Thema interessant für sie? Oder haben sie vielleicht eine ähnliche Herausforderung und möchten unsere Einschätzung dazu haben?

Wir nehmen uns gerne 30 Minuten Zeit und tauschen uns in einem kostenlosen Strategiegespräch mit ihnen aus!

Jetzt Termin buchen

Das wird Sie auch interessieren!

#MARKETING   #DIGITALISIERUNG   #projectmanagement  

Projektmanagement 2.0 - Gibt es die One Fits All Lösung?

Alle Kunden, egal welches Projekt - jeder bekommt die perfekte Betreuung mit dem idealen Projektmanagement. Ein Traum oder Realität? Wir zeigen auf was es ankommt.

#BRANDING   #DIGITALISIERUNG   #MARKETING  

Damit ihr wisst was wir letzten Sommer getan haben

Unsere Social Media Aktivitäten haben sich in den letzten Wochen in Grenzen gehalten. Ja ja, wir wissen, Zeit hat man nicht, Zeit nimmt man sich. Es soll auch keine Ausrede sein, aber es ist eben wie es ist. Der Fokus unseres ganzen Teams war komplett woanders.

#performance   #MARKETING   #seo  

Google Tag Manager vs. plain Google Analytics

Erstens: Es ist kein entweder oder. Im Gegenteil: Richtig benutzt sind sie die perfekte Kombination für ein modernes Websitetracking