Grunt watch Task

Shopware 5 bietet einen Grunt Task, mit welchen man die Kompilierung der less Dateien beschleunigen kann. Man muss also nicht jedes mal im Backend das Theme neu kompilieren, sondern startet einmal den Grunt Task über die Console mit dem Befehl grunt und GruntJS kompiliert automatisch alle less und javascript Dateien. Der Task grunt watch erkennt automatisch, wenn wir eine Datei geändert haben und kompiliert diese direkt, sobald wir eine entsprechende geänderte Datei gespeichert haben. Wie Ihr in Shopware 5 Grunt installiert, ist im Shopware Designers Guide beschrieben.

Allerdings erhält man keine Desktop Benachrichtigung, wenn der Task durchgelaufen ist. Man schaut also trotzdem jedes mal in die Console, um zu schauen, ob der Task durchgelaufen ist. Eine Benachrichtigung direkt auf dem Desktop wäre da ziemlich praktisch oder? Dann lass uns das ganze mal installieren.

Grunt Notify installieren

Hierfür gibt es das Grunt Notify Package. Um dieses zu installieren, gehen wir in den Ordner /themes und installieren das Package über npm. npm ist der Pakete Manager von NodeJS, ähnlich wie bspw. apt bei Linux oder Composer bei PHP.

Um das Package über npm zu installieren, führen wir folgenden Befehl aus:
npm install grunt-notify --save-dev.
Mit diesem Befehl installieren wir das Package grunt-notify. Durch den Zusatz --save-dev wird das Package in unseren Abhängigkeiten
( devDependencies ) in unserer package.json gespeichert.
Somit können wir also auch in Zukunft das Package automatisch direkt mit installieren, da wir es als Abhängigkeit gespeichert haben.

Nachdem das Package installiert worden ist, sollte eure package.json im Ordner /themes wie folgt aussehen:

{
"private": true,
"devDependencies": {
"grunt": "^0.4.5",
"grunt-contrib-jshint": "^0.11.2",
"grunt-contrib-less": "^1.0.1",
"grunt-contrib-uglify": "^0.9.1",
"grunt-contrib-watch": "^0.6.1",
"grunt-notify": "^0.4.1"
}
}

Hier wurde nun das Package in der letzten Zeile hinzugefügt
( "grunt-notify": "^0.4.1" ).
Nachdem das Package installiert ist, müssen wir noch unser eigentliches Gruntfile.js anpassen, damit wir eine entsprechende Nachricht erhalten, sofern alle less Dateien kompiliert worden sind.

Gruntfile.js anpassen

Hierzu fügen wir an erster Stelle innerhalb von grunt.initConfig unseren notify Task ein.

grunt.initConfig({
notify: {
watch: {
options: {
title: 'Task complete',
message: 'Less files were compiled'
}
}
},
uglify: {
....
....

Damit unser Task auch entsprechend getriggert wird, müssen wir es noch dem less watch Task mitteilen. Hierzu erweitern wir das array in unserem less watch Task und fügen hier hinter dem 'less:development' ein: 'notify:watch'. Ungefähr in Zeile 87 sieht es dann wie folge aus:
tasks: ['less:development', 'notify:watch']

Zu guter letzt müssen wir den task noch laden & registrieren.
Ziemlich weit unten im Gruntfile.js fügen wir den neuen task ein.

grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-watch');
....
....
grunt.loadNpmTasks('grunt-notify');

und erweitern das das array in unserem default Task, damit dieses auch getriggert werden kann.

grunt.registerTask('default', [ 'less:development', 'uglify:development', 'watch', 'notify' ]);

Das komplette Gruntfile.js sieht nun wie folgt aus:

module.exports = function (grunt) {
grunt.option.init({
shopId: 1
});

var file = '../web/cache/config_' + grunt.option('shopId') + '.json',
config = grunt.file.readJSON(file),
lessTargetFile = {},
jsFiles = [],
jsTargetFile = {},
content = '',
variables = {
'font-directory': '"../../themes/Frontend/Responsive/frontend/_public/src/fonts"',
'OpenSansPath': '"../../themes/Frontend/Responsive/frontend/_public/vendors/fonts/open-sans-fontface"'
};

lessTargetFile['../' + config.lessTarget] = '../web/cache/all.less';

config['js'].forEach(function (item) {
jsFiles.push('../' + item);
});
jsTargetFile['../' + config.jsTarget] = jsFiles;

config['less'].forEach(function (item) {
content += '@import "../' + item + '";';
content += "\n";
});
grunt.file.write('../web/cache/all.less', content);

for (var key in config.config) {
variables[key] = config.config[key];
}

grunt.initConfig({
notify: {
watch: {
options: {
title: 'Task complete',
message: 'Less files were compiled'
}
}
},
uglify: {
production: {
options: {
compress: true,
preserveComments: false
},
files: jsTargetFile
},
development: {
options: {
mangle: false,
compress: false,
beautify: true,
preserveComments: 'all'
},
files: jsTargetFile
}
},
less: {

production: {
options: {
compress: true,
modifyVars: variables
},
files: lessTargetFile
},
development: {
options: {

modifyVars: variables,
dumpLineNumbers: 'all',
sourceMap: true,
sourceMapFileInline: true
},
files: lessTargetFile
}
},
watch: {
less: {
files: [
'../engine/Shopware/Plugins/**/*.less',
'../themes/Frontend/**/*.less'
],
tasks: ['less:development', 'notify:watch']
},
js: {
files: [
'../themes/Frontend/**/_public/src/js/*.js',
'../engine/Shopware/Plugins/**/frontend/**/src/js/**/*.js'
],
tasks: ['uglify:development']
}
},
jshint: {
options: {
browser: true,
force: true,
globals: {
jQuery: true,
StateManager: true
}
},
src: [
'Gruntfile.js',
'../themes/Frontend/**/_public/src/js/*.js',
'../engine/Shopware/Plugins/**/frontend/**/src/js/**/*.js'
]
}
});

grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-notify');

grunt.registerTask('production', [ 'jshint', 'less:production', 'uglify:production' ]);
grunt.registerTask('default', [ 'less:development', 'uglify:development', 'watch', 'notify' ]);
};

Die Grunt Notification

Wenn wir nun in unseren Ordner /themes gehen und grunt ausführen, bekommen wir eine entsprechende Benachrichtigung auf unserem Desktop, sobald die less Dateien kompiliert worden sind.

Grunt watch Task
Shopware Onlinekurs Jetzt kostenlos anmelden.