Website deployment Workflow

Share on facebook
Share on google
Share on twitter
Share on linkedin
Eine Webseite kann man auf den Webserver laden, so wie man sie in der IDE geschrieben hat. Es gibt aber auch die Möglichkeit eine Seite verkleinert auf den Webserver zu laden. Dies bringt mehrere Vorteile.
Web coding

Hier zeige ich euch meinen kleinen Workflow zum automatischen „Optimieren“ eurer Webseiten. Das hier beschriebene „Optimieren“ meint nicht das Optimieren des Sourcecodes selbst, sondern eher im Bereich der Auslieferung.

Eine Webseite kann man auf den Webserver laden, so wie man sie in der IDE geschrieben hat. Es gibt aber auch die Möglichkeit eine Seite verkleinert auf den Webserver zu laden. Dies bringt mehrere Vorteile.

Zum einen Ist es bei den ganzen SEO Analyse-Tools gerne gesehen und beschert ein paar positive Punkte. Zum anderen ist eine „minify“ oft als *.min.css benannte Seite auch von der benötigten Speichergrösse kleiner wie eine die nicht minimiert wurde.

Fazit: kleineres Dokument == schnellere Auslieferung vom Server zum Client.

In den nächsten Schritten werde ich Schritt für schritt erklären, wie man diesen kleinen Workflow aufbaut.

Was wird benötigt

Editor

Mein Editor den ich immer benutze ist der VSCode oder auch Notepad++. Es gibt keine Vorgaben welchen Editor/IDE ihr benutzt. Wichtig ist nur das ihr mit dem Editor eurer Wahl zurecht kommt.

Software

Ich verwende NPM, es funktioniert auch mit Yarn, allerdings sind die Commands nicht die selben und in seltenen Fällen kann es auch sein das unter Umständen gewisse Funktionen oder Abläufe nicht mit Yarn kompatibel sein könnten.

Aufbau

Ordnerstruktur

  • working_dir
    • gruntfile.js
    • package.json
    • .gitignore
    • src
      • folder1
        • file 1
        • file n
      • folder2
        • file 1
        • file 2
        • file n
    • dist

 

Npm init

Die einfachste art um eine valide package.json zu erhalten geht mit dem init comand. Dazu öffnet man CMD oder Git Bash und navigiert in den Ordner, in der die zuvor beschriebene Ordnerstruktur aufgebaut wurde und führt folgenden Befehl aus npm init

Anschliessend kommen ein paar Fragen welche alle ausgefüllt, oder mit Enter übersprungen werden können.

Habt ihr dies gemacht sollte es ungefähr so aussehen:

uebersicht npm init

Nun habt ihr in diesem Ordner, in der ihr npm init ausgeführt habt, eine Datei liegen namens package.json die wie folgt aussieht:

{
  "name": "working_dir",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
} 

Nun können die verschiedensten Module installiert werden, welche npm zu bieten hat. die erledigt man durch folgenden Beispielcode:
npm install grunt
oder
npm install grunt-contrib-clean --save-dev

Auf die Unterschiede zwischen dependencies und devDependencies werde ich hier nicht eingehen.
Im nächsten Abschnitt ist eine Komplette package.json zusehen.

Package.json

In der Package.json kommen die Projektspezifischen Informationen sowie von NPM genutzte Erweiterungen zusammen.

{
  "name": "testwebsite",
  "version": "1.0.0",
  "description": "Meine Webseiten-Beschreibung",
  "main": "Gruntfile.js",
  "dependencies": {
    "grunt": "^1.0.4"
  },
  "devDependencies": {
    "grunt-contrib-clean": "^2.0.0",
    "grunt-contrib-copy": "^1.0.0",
    "grunt-contrib-cssmin": "^3.0.0",
    "grunt-contrib-htmlmin": "^3.1.0",
    "grunt-contrib-imagemin": "^3.1.0",
    "grunt-contrib-uglify": "^4.0.1",
    "imagemin-mozjpeg": "^8.0.0",
    "imagemin-optipng": "^7.1.0",
    "imagemin-svgo": "^7.0.0"
  },
  "scripts": {
    "build": "grunt"
  },
  "author": "Achim Grolimund",
  "license": "ISC"
} 

Die package.json bietet für die Entwicklung einen riesigen Vorteil. Den alle die das Projekt mit dieser Datei erhalten, können durch die Eingabe von npm install alle Module installieren lassen die ihr zuvor installiert und so in die package.json geschrieben habt.
Sprich, ihr müsst den Ordner node_modules und den dist Ordner NICHT hochladen. So ist ein Upload wie auch Download schneller und es bringt keine Mergekonflikte mit sich sollte sich ein Modul updaten bei einem anderen Entwickler.

Gruntfile.js

In dem Gruntfile.js werden die Abläufe beschrieben, wie und welche Dateien oder Dateitypen verarbeitet werden. Es wird hier das ganze Gruntfile.js gezeigt und in den nachfolgenden abschnitten wird auf die einzelnen Segmente eingegangen.

const mozjpeg = require('imagemin-mozjpeg');
const optipng = require('imagemin-optipng');
const svgo = require('imagemin-svgo');

module.exports = function (grunt) {
  grunt.initConfig({
    clean: {
      test: ['dist/*']
    },
    htmlmin: {
      dist: {
        options: {
          removeComments: true,
          collapseWhitespace: true
        },
		files: [{
          expand: true,
          cwd: 'src/',
          src: ['**/*.html'],
          dest: 'dist/'
        }]
      }
    },
    copy: {
      spezial: {
        files: [
          { src: ['src/robots.txt'], dest: 'dist/robots.txt' },
          { src: ['src/sitemap.xml'], dest: 'dist/sitemap.xml' },
          { src: ['src/.htaccess'], dest: 'dist/.htaccess' }
        ]
      }
    },
    imagemin: {
      dynamic: {
        options: {
          optimizationLevel: 7,
          svgoPlugins: [{ removeViewBox: false }],
          use: [mozjpeg(), optipng(), svgo()] // Plugins
        },
        files: [{
          expand: true,
          cwd: 'src/img/',
          src: ['**/*.{png,jpg,gif,svg}'],
          dest: 'dist/img/'
        }]
      }
    },
    uglify: {
      my_target: {
        files: [{
          expand: true,
          cwd: 'src/',
          src: ['**/*.js'],
          dest: 'dist/'
        }]
      }
    },
    cssmin: {
      target: {
        files: [{
          expand: true,
          cwd: 'src/css',
          src: ['**/*.css'],
          dest: 'dist/css'
        }]
      }
    }
  });

  grunt.loadNpmTasks("grunt-contrib-htmlmin");
  grunt.loadNpmTasks('grunt-contrib-copy');
  grunt.loadNpmTasks('grunt-contrib-clean');
  grunt.loadNpmTasks('grunt-contrib-imagemin');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-cssmin');

  grunt.registerTask('worker', ['clean', 'htmlmin', 'copy',
                     'imagemin', 'uglify', 'cssmin']);
  grunt.registerTask("default", ["worker"]);
}; 

 

clean

Beim clean werden alle Inhalte gelöscht. Zu empfehlen als erste Aufgabe.

clean: {
      test: ['dist/*']
    }, 

 

htmlmin

Mit dem htmlmin werden alle *.html Files minify’d. wer möchte, kann diese auch als *.min.html erstellen, die ist allerdings mit einem zusätzlichen Aufwand verbunden, aufgrund das dann alle Verlinkungen auf diese Datei auch den selben Namen haben muss.

htmlmin: {
      dist: {
        options: {
          removeComments: true,
          collapseWhitespace: true
        },
        files: [{
          expand: true,
          cwd: 'src/',
          src: ['**/*.html'],
          dest: 'dist/'
        }]
      }
    } 

 

copy

das copy ist wie es der Namen bereits sagt, ein Kopieren. dies Eignet sich zum Kopieren von Dateien welche nicht bearbeitet werden oder die von einem speziellen Ort kopiert werden sollen.

copy: {
      spezial: {
        files: [
          { src: ['src/robots.txt'], dest: 'dist/robots.txt' },
          { src: ['src/sitemap.xml'], dest: 'dist/sitemap.xml' },
          { src: ['src/.htaccess'], dest: 'dist/.htaccess' }
        ]
      }
    } 

 

imagemin

Das imagemin ist ein gutes Modul, welches Bilder die unnütze Daten enthalten verkleinern kann. Dies ist ein Punkt der bei einer SEO Auswertung öfters den einen oder anderen Punkt abziehen kann.

imagemin: {
      dynamic: {
        options: {
          optimizationLevel: 7,
          svgoPlugins: [{ removeViewBox: false }],
          use: [mozjpeg(), optipng(), svgo()] // Plugins
        },
        files: [{
          expand: true,
          cwd: 'src/img/',
          src: ['**/*.{png,jpg,gif,svg}'],
          dest: 'dist/img/'
        }]
      }
    } 

 

uglify

Hier mit dem uglify werden die JavaScript-Files verkleinert, genau wie bei dem htmlmin.

uglify: {
      my_target: {
        files: [{
          expand: true,
          cwd: 'src/',
          src: ['**/*.js'],
          dest: 'dist/'
        }]
      }
    } 

 

cssmin

Hier nochmals das selbe für CSS Dateien.

cssmin: {
      target: {
        files: [{
          expand: true,
          cwd: 'src/css',
          src: ['**/*.css'],
          dest: 'dist/css'
        }]
      }
    } 

 

Ressourcen

Achim

Achim

Die reinste Form des Wahnsinns ist es, alles beim Alten zu lassen und gleichzeitig zu hoffen, dass sich etwas ändert!

Schreibe einen Kommentar

Haben Sie Fragen

Zögern Sie nicht und Kontaktieren Sie und über unser Kontaktformular