SCSS/JavaScript mit @wordpress/scripts kompilieren und minifizieren

Veröffentlicht: von Matze – Kommentar hinterlassen Letzte Aktualisierung:

WordPress bietet mit @wordpress/scripts ein mittlerweile sehr ausgereiftes NPM-Paket an, um JavaScript und SCSS zu kompilieren und zu minifizieren. Dabei ist es aber in seiner Standardkonfiguration eigentlich nur auf Blöcke für den Block-Editor ausgerichtet. Durch eine Anpassung der Webpack-Konfiguration kann man aber auch seine eigenen unabhängigen SCSS-, CSS- und JavaScript-Dateien kompilieren und minifizieren.

So können auch Projekte, die keine Blöcke beinhalten, aber JavaScript und CSS, das es zu minifizieren gilt, um die Dateigrößen möglichst gering zu halten, davon Gebrauch machen. Gleichzeitig hat man so immer denselben Befehl, den man ausführen kann, um seine Assets zu minifizieren – oder im Falle von SCSS/SASS auch zu kompilieren. In meinem Fall fielen so die proprietären Watcher meiner IDE PhpStorm weg, die das bisher übernommen haben.

Installation von NPM

Zuerst muss NPM installiert werden. Die geht als Teil von node.js über die entsprechende Website: https://nodejs.org/

Lade dort die für dein System empfohlene Version herunter und installiere sie.

Hast du node.js bzw. NPM bereits installiert, stelle sicher, dass die Version halbwegs aktuell ist, um später Probleme zu vermeiden.

package.json anlegen

Lege nun ins Wurzelverzeichnis deines WordPress-Plugins oder -Themes eine Datei namens package.json mit folgendem Inhalt:

{
	"name": "paketname",
	"description": "Paketbeschreibung",
	"scripts": {
		"start": "wp-scripts start",
		"build": "wp-scripts build"
	},
	"author": "Epiphyt",
	"license": "GPL-2.0"
}Code-Sprache: JSON / JSON mit Kommentaren (json)

Passe dabei den Namen in Zeile 2, die Beschreibung in Zeile 3 und den Autor in Zeile 8 an. Beim Paketnamen sind lediglich Kleinbuchstaben und Bindestriche erlaubt.

Erforderliche Pakete installieren

Installiere nun über das Terminal bzw. die Kommandozeile per NPM die erforderlichen Pakete:

npm install @wordpress/scripts --save-dev
npm install extract-loader --save-dev
npm install file-loader --save-dev
npm install ignore-emit-webpack-plugin --save-dev
npm install mini-css-extract-plugin --save-devCode-Sprache: CSS (css)

webpack.config.js anlegen

Für die eigentliche Durchführung der Kompilierung/Minifizierung ist Webpack verantwortlich. Daher benötigst du, ebenfalls im Wurzelverzeichnis, eine Datei namens webpack.config.js. Fülle sie mit folgendem Inhalt:

const defaultConfig = require( './node_modules/@wordpress/scripts/config/webpack.config' );
const path = require( 'path' );
const IgnoreEmitPlugin = require( 'ignore-emit-webpack-plugin' );
const MiniCSSExtractPlugin = require( 'mini-css-extract-plugin' );

const isProduction = process.env.NODE_ENV === 'production';
const mode = isProduction ? 'production' : 'development';

const jsFiles = {
	'js-file': path.resolve( process.cwd(), 'assets/js', 'js-file.js' ),
};
const scssFiles = {
	'style': path.resolve( process.cwd(), 'assets/style/scss', 'style.scss' ),
};

module.exports = [
	// JavaScript minification
	{
		mode: mode,
		devtool: ! isProduction ? 'source-map' : 'hidden-source-map',
		entry: jsFiles,
		output: {
			filename: '[name].min.js',
			path: path.resolve( process.cwd(), 'assets/js' ),
		},
		optimization: {
			minimize: true,
			minimizer: defaultConfig.optimization.minimizer,
		},
	},
	// compiled + minified CSS file
	{
		mode: mode,
		devtool: ! isProduction ? 'source-map' : 'hidden-source-map',
		entry: scssFiles,
		output: {
			path: path.resolve( process.cwd(), 'assets/style' ),
		},
		module: {
			rules: [
				{
					test: /\.(sc|sa)ss$/,
					use: [
						MiniCSSExtractPlugin.loader,
						{
							loader: 'css-loader',
							options: {
								sourceMap: ! isProduction,
								url: false,
							}
						},
						{
							loader: 'sass-loader',
							options: {
								sourceMap: ! isProduction,
								sassOptions: {
									minimize: true,
									outputStyle: 'compressed',
								}
							}
						},
					],
				},
			],
		},
		plugins: [
			new MiniCSSExtractPlugin( { filename: '[name].min.css' } ),
			new IgnoreEmitPlugin( [ '.js' ] ),
		],
	},
	// compiled CSS
	{
		mode: mode,
		devtool: ! isProduction ? 'source-map' : 'hidden-source-map',
		entry: scssFiles,
		output: {
			path: path.resolve( process.cwd(), 'assets/style' ),
		},
		module: {
			rules: [
				{
					test: /\.(sc|sa)ss$/,
					use: [
						MiniCSSExtractPlugin.loader,
						{
							loader: 'css-loader',
							options: {
								sourceMap: ! isProduction,
								url: false,
							}
						},
						{
							loader: 'sass-loader',
							options: {
								sourceMap: ! isProduction,
								sassOptions: {
									minimize: false,
									outputStyle: 'expanded',
								}
							}
						},
					],
				},
			],
		},
		plugins: [
			new MiniCSSExtractPlugin( { filename: '[name].css' } ),
			new IgnoreEmitPlugin( [ '.js' ] ),
		],
	},
];
Code-Sprache: JavaScript (javascript)

Dort ist bereits alles so konfiguriert, wie es erforderlich ist, um JavaScript- und (S)CSS-Dateien zu verarbeiten.

Anpassen musst du gegebenenfalls lediglich die Zeilen 10 und 13. Dort sind aktuell jeweils eine JavaScript- und eine SCSS-Datei angegeben. Dort sind demnach immer die Dateien genannt, die verarbeitet werden sollen. Wenn du diese Zeilen duplizierst und beispielsweise einen anderen Dateinamen angibst, kannst du auch mehrere Dateien verarbeiten. Beispielsweise so:

	'js-file': path.resolve( process.cwd(), 'assets/js', 'js-file.js' ),
	'another-js-file': path.resolve( process.cwd(), 'assets/js', 'another-js-file.js' ),Code-Sprache: JavaScript (javascript)

In diesem Fall wird einmal die JavaScript-Datei unter assets/js/js-file.js minifiziert und einmal die Datei unter assets/js/another-js-file.js. Beides jeweils von dem Verzeichnis aus gesehen, in dem die webpack.config.js liegt – also vom Wurzelverzeichnis des Projekts aus.

Datei woanders speichern

Im Standardfall wird der Ausgabepfad für JavaScript-Dateien in Zeile 24 definiert, der für kompiliertes CSS in Zeile 77 und der für kompiliertes und minifiziertes CSS in Zeile 37. Benötigst du für einzelne Dateien aber ein anderes Verzeichnis, beispielsweise weil du eine JavaScript im Verzeichnis assets/js/admin/ liegen hast (und dort natürlich auch die minifizierte Datei speichern willst), so ist der vordere Teil der vorhin genannten Zeilen 10 und 13 wichtig. Über diesen kannst du nämlich einen eigenen Ausgabepfad für diese einzelne Datei definieren – ausgehend vom fest definierten Ausgabepfad.

Das könnte dann so aussehen:

	'admin/admin-js-file': path.resolve( process.cwd(), 'assets/js/admin', 'admin-js-file.js' ),Code-Sprache: JavaScript (javascript)

Durch das admin/ noch zu Beginn wird der Ausgabepfad vom Standard assets/js/ für diese Datei zu assets/js/admin/ erweitert und die Datei dann darin gespeichert.

Kompilierung/Minifizierung ausführen

Um nun die Kompilierung bzw. Minifizierung gemäß deiner getätigten Konfiguration durchzuführen, musst du im Terminal bzw. in der Kommandozeile folgendes eingeben:

Für den Testbetrieb:
npm start

Für den Produktivbetrieb:
npm run build

Während im Testbetrieb Änderungen an den entsprechenden Dateien dazu führen, dass diese direkt neu kompiliert/minifiziert werden, wird beim Produktivbetrieb nur ein Durchgang durchgeführt. Dieser deaktiviert in unserer Konfiguration beispielsweise auch die Erstellung sogenannter Source-Maps (kleine Dateien, die eine Zuweisung von Bereichen/Zeilen in der kompilierten/minifizierten zur Originaldatei beinhalten und von Entwicklungswerkzeugen des Browsers verwendet werden).

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert