Kompilierung und Minifizierung von Dateien

Inhaltsverzeichnis

Einleitung

Konfiguration in Schritten

Befehle zur Kompilierung und Minifizierung

Einleitung

In Standardvorlagen werden die Stile mit dem CSS-Präprozessor Sass geschrieben. Folglich werden die Stile in .scss. Dateien gespeichert. Leider können die Browser diese nicht lesen, so dass sie in .css-Dateien umkompiliert werden müssen, die sie bereits erkennen können.

Die Minifizierung von Dateien ist eine weitere Möglichkeit, eine Datei zu komprimieren und so ihr Gewicht zu verringern. Durch die Minifizierung kann eine Website schneller ausgeführt werden. Die Minifizierung kann manuell durchgeführt werden, ist aber eine langwierige und ineffiziente Arbeit.

In diesem Artikel erfährst du, wie du Dateien automatisch kompilieren und minifizieren kannst. Während dieser Vorgänge arbeitest du mit lokalen Dateien. Dabei hilft dir das Tool – Liquid Sync.

Konfiguration in Schritten

1. Node.js

Am Anfang musst du Node.js. installieren. Der Installateur ist hier verfügbar. Als Ergebnis erhältst du eine Umgebung für die weitere Arbeit mit Dateien.

2. Folder nodejs

Nachdem du Node.js installiert hast, fügst du in der Vorlagendatei einen speziellen Folder mit dem Namen nodejs hinzu. Dieser Folder enthält alle Dateien, die zur Durchführung der Minifizierung benötigt werden.

Tipp
Arbeite an lokalen Dateien auf deinem Computer, anstatt an die Dateien im Administrationspanel.

3. Gulp

Gulp ist ein Tool, das die automatische Kompilierung und Minifizierung der Dateien für dich übernimmt. Füge in dem neuen Folder (nodejs) die Datei gulpfile.js mit folgendem Inhalt hinzu:

var gulp = require(‘gulp’);
var sass = require(‘gulp-sass’);
var uglify = require(‘gulp-uglify-es’).default;
var rename = require(‘gulp-rename’);
var minify = require(‘gulp-minify’);
var chokidar = require(‘chokidar’);gulp.task(‘sass’, function() {
return gulp.src(‘../scss/**/*.scss’)
.pipe(sass())
.pipe(gulp.dest(‘../css’))
});gulp.task(‘watch’, function(){
gulp.watch(‘../scss/**/*.scss’, [‘sass’]);
});

gulp.task(‘css’, function(){
return gulp.src(‘../scss/**/*.scss’)
.pipe(rename({suffix: ‘.min’}))
.pipe(sass({outputStyle: ‘compressed’}))
.pipe(gulp.dest(‘../css’))
});

gulp.task(‘js’, function(){
return gulp.src(‘../js/**/*.js’)
.pipe(rename({suffix: ‘.min’}))
.pipe(uglify()) .pipe(gulp.dest(‘../js’))
});

gulp.task(‘minify’, [‘js’, ‘css’]);
gulp.task(‘watchTopazRelease’, function() {
chokidar.watch(‘../scss/**/*.scss’).on(‘change’, (path) => {
console.log(File '${path}' changed.)
return gulp.src(‘../scss/layout*.scss’)
.pipe(sass({outputStyle: ‘compressed’}))
.pipe(gulp.dest(‘../css/’))
});

chokidar.watch(‘../js/layout!(*.min).js’).on(‘change’, (path) => {
console.log(File '${path}' changed.)
return gulp.src(path)
.pipe(minify({ mangle: false, compress: false, noSource: true, ext: { min: “.min.js” } }))
.pipe(gulp.dest(‘../js/’)) });
});

const watchSapphireScssFilesDependencies = {
“_collection-points.scss”: “../scss/collection-points.scss”,
“_globals1.scss”: “../scss/desktop1.scss”,
“_header.scss”: “../scss/desktop1.scss”,
“_country-flags.scss”: “../scss/desktop1.scss”,
“_tooltip.scss”: “../scss/desktop1.scss”,
“_stepper.scss”: “../scss/desktop1.scss”,
“_pagination.scss”: “../scss/desktop1.scss”,
“_sliders.scss”: “../scss/desktop1.scss”,
“_categories-navigation.scss”: “../scss/desktop1.scss”,
“_home.scss”: “../scss/desktop1.scss”,
“_product-list.scss”: “../scss/desktop1.scss”,
“_categories-map.scss”: “../scss/desktop1.scss”,
“_order.scss”: “../scss/desktop1.scss”,
“_globals2.scss”: “../scss/desktop2.scss”,
“_globals-m.scss”: “../scss/mobile.scss”,
“_offline.scss”: “../scss/offline.scss” };
const watchSapphireJsFiles = [‘../js/init.js’, ‘../js/init-ui1.js’, ‘../js/init-ui2.js’, ‘../js/js.js’];

gulp.task(‘watchSapphireRelease’, function() {
chokidar.watch([‘../js/layout!(*.min).js’, …watchSapphireJsFiles]).on(‘change’, (path) => {
console.log(File '${path}' changed.)
return gulp.src(path)
.pipe(minify({
mangle: false,
compress: false,
noSource: true, ext: { min: “.min.js” } }))
.pipe(gulp.dest(‘../js/’)) });
chokidar.watch(‘../scss/**/*.scss’).on(‘change’, (path) => {
console.log(File '${path}' changed.)
let stringsOfRelativePathParts = [];
if(path.includes(‘/’)) stringsOfRelativePathParts = path.split(“/”);
else
stringsOfRelativePathParts = path.split(“\\”);
let fileName = stringsOfRelativePathParts[stringsOfRelativePathParts.length-1]; if(watchSapphireScssFilesDependencies[fileName] !== undefined) { path = watchSapphireScssFilesDependencies[fileName]; stringsOfRelativePathParts = watchSapphireScssFilesDependencies[fileName].split(“/”);
return gulp.src(path)
.pipe(sass({outputStyle: ‘compressed’}))
.pipe(gulp.dest(‘../css/’)); }
else
if (path.includes(‘static-elements’) || path.includes(‘elements’) || path.includes(‘partials’)) {
return gulp.src(‘../scss/layout*.scss’)
.pipe(sass({outputStyle: ‘compressed’}))
.pipe(gulp.dest(‘../css/’)) }
else
if(!fileName.includes(‘global-variables’) ) {
return gulp.src(path)
.pipe(sass({outputStyle: ‘compressed’}))
.pipe(gulp.dest(‘../css/’)) } });
});

4. NPM

Der letzte Schritt besteht darin, NPMa (Node Package Manager) hinzuzufügen. Für diesen Vorgang benötigst du ein Terminal. Wenn du kein Codebearbeitungsprogramm hast, das ein solches Terminal bereitstellt, ist das kein Problem. Starte einfach das Terminal, das auf deinem System verfügbar ist, wie folgt:

Tipp
Wenn du das Liquid Sync-Toll verwendest, stellst du sicher, dass es ausgeschaltet ist, bevor du den nächsten Schritt ausführen.
  • Öffne den Folder nodejs, drücke und halte linke Shift-taste auf Tastatur und klicke dann mit dem rechten Maustaste in ein beliebiges Feld dieses geöffeneten Folder,
  • Es erscheint jetzt eine Liste mit Optionen, in der du auswählst: Hier ein Befehlsfenster öffnen (in Windows 10 heißt diese Option: PowerShell-Fenster hier öffnen),
  • Jetzt kannst du NPM in deinem Projekt installieren. Gib einfach den Befehl npm init ein und dann bestätige ihn mit der Schältflache ENTER.
  • Während der Installation werden die Felder mit Informationen angezeigt, die ausgefüllt werden können. Es geht dabei u.a. um package name, version, description und eine Frage nach der Richtigkeit der eingegebenen Daten. Diese Informationen müssen nicht ausgefült werden. Du kannst sie mit dem ENTER-Taste überspringen.
  • Wenn der Vorgang abgeschlossen ist, gib einen weiteren Befehl ein – vor “save” stehen zwei Bindestriche, keine Leerzeichen! -> npm install – -save-dev gulp@3.9.1 gulp-sass gulp-uglify-es gulp-rename

Der obige Befehl installiert die Plugins, die es ermöglichen, dass die Funktionen aus der Datei gulpfile.js korrekt funktionieren. Der Befehl wird am besten in das Befehlsfenster kopiert. Wenn du ihn jedoch manuell eingibst, beachte, dass vor dem Wort “save” zwei Bindestriche stehen, nicht einer.

Tipp
Wenn du das Liquid Sync-Tool verwendest, sollst du den Folder jetzt von nodejs in .nodejs. umbenennen. Durch Hinzufügen dieses Punktes am Anfang des Foldernamens wird dieser beim Synchronisieren von Dateien übersprungen.

Befehle zur Kompilierung und Minifizierung

Wenn du die oben genannten Schritte abgeschlossen hast, kannst du nun mit der Kompilierung und Minifizierung fortfahren. Es gibt mehrere Funktionen, die in der Datei gulpfile.js definiert sind. Im Folgenden findest du eine kurze Beschreibung der Funktionen und wie du sie aufrufst:

  • Kompilierung der Dateien .scss do .css:

Der Befehl gulp sass kompiliert die .scss-Dateien in .css.-Dateien um. Dadurch kannst du die Stile in den .scss-Dateien bearbeiten.

  • Automatische Kompilierung der Dateien .scss do .css:

Wenn dir der Befehl gulp sass gefallen hast, wirst du ihn noch mehr mögen. Der Befehl gulp watch löst automatisch eine Kompilierung in eine .css-Datei nach jeder Änderung an einer .scss-Datei aus.

  • Minifizierung der Dateien .css:

Die resultierenden .css-Dateien können verkleinert werden. Hierfür ist der Befehl gulp css zuständig. Nachdem er ausgeführt wurde, werden alle .scss-Dateien zu .min.css-Dateien rekompiliert. Eine solche Datei ist viel kleiner als eine normale .css-Datei.

  • Minifizierung der Dateien .js:

Nicht nur Stildateien können minimiert werden. Es lohnt sich, auch .js-Dateien zu verkleinern. Dies geschieht mit dem Befehl gulp js. Beachte jedoch, dass dieser Befehl Kopien mit “.min” im Namen für alle .js-Dateien (aus dem JS-Folder in deiner Vorlage) erstellt. Das bedeutet, dass, wenn es dort bereits minifizierte Dateien gibt, auch diese kopiert und erneut minifiziert werden (was ein unnötiger Vorgang ist). Wir empfehlen daher, alle Dateien mit der Endung .min.js aus dem JS-Folder zu löschen, bevor du die .js-Dateien minifizierst.

Eine Ausnahme bildet die Datei jquery.mcustomscrollbar.concat.min.js in der Agat-Vorlage, die nicht entfernt werden sollte. In diesem Fall sollte nur ihre Kopie mit dem Suffix .min.min.js entfernt werden.

  • Minifizierung der Dateien:

Der letzte Befehl ist gulp minify. Reduziert .css- und .js-Dateien gleichzeitig.

Finden Sie den Artikel hilfreich?

Wyślij opnie