Moin,
seit einigen Tagen benutze ich jetzt Grunt für Shopware und das mit recht gemischten Gefühlen. Tendenziell ist es ein super Tool um schneller zu arbeiten, es gibt aber einige Nachteile bzw. sogar Fehler:
1. Javascript Dateien werden nicht kompiliert, da der Pfad in der gruntfile falsch ist, statt '/Frontend/' steht dort '/frontend/'. Bei einem Linux Server ist das nicht ganz so toll.
2. Javascript Dateien werden in einem src Ordner erwartet. Das ist aber sonst nirgends eine Grundvoraussetzung. Deshalb habe ich das aus dem Pfad entfernt
3. Pfade zu Bildern werden nicht modifiziert. Das sorgt dann dafür das z.B. Hintergrundbilder nicht mehr angezeigt werden. Hier fehlt nur die Option 'relativeUrls: true', dann funktioniert auch das.
4. Variablen werden am Ende ersetzt. Ich hab keine Ahnung wie das sonst gemacht wird, aber scheinbar mit Grunt anders als mit dem normalen Compiler. Denn man kann normalerweise die Konfiguration bequem per LESS Datei überschreiben. Das ist für ein Custom Template ziemlich wichtig, damit der Kunde nichts kaputt macht.
Grunt ersetzt die Variablen aber scheinbar erst ganz am Schluss. Das sorgt dafür, das alle meine Anpassungen wieder überschrieben werden. Unschön.
Punkt 1-3 konnte ich selbst anpassen, das ging recht gut - Auch wenn ich mich wundere warum gerade Punkt 1 nicht vorher aufgefallen ist ? - Punkt 4 nervt aber ganz gewaltig. Ich denke nur an die Situation das man im Development immer mit Grunt arbeitet aber für den Produktiveinsatz dann auf einmal auf den internen Compiler wechselt - wie es empfohlen wird. Wenn dann auf einmal etwas anderes herauskommt als man erwartet, dann hat man ein Problem.
Für alle die auch schon Probleme damit hatten und nach einer Lösung suchen, poste ich hier mal meine aktuelle Gruntfile.
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({
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,
relativeUrls: true
},
files: lessTargetFile
},
development: {
options: {
modifyVars: variables,
dumpLineNumbers: 'all',
sourceMap: true,
sourceMapFileInline: true,
relativeUrls: true
},
files: lessTargetFile
}
},
watch: {
less: {
files: [
'../engine/Shopware/Plugins/**/*.less',
'../themes/Frontend/**/*.less'
],
tasks: ['less:development']
},
js: {
files: [
'../themes/Frontend/**/_public/src/js/*.js',
'../engine/Shopware/Plugins/**/Frontend/**/js/**/*.js'
],
tasks: ['uglify']
}
},
jshint: {
options: {
browser: true,
force: true,
globals: {
jQuery: true,
StateManager: true
}
},
src: [
'Gruntfile.js',
'../themes/Frontend/**/_public/src/js/*.js',
'../engine/Shopware/Plugins/**/Frontend/**/js/**/*.js'
]
}
});
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.registerTask('production', [ 'jshint', 'less:production', 'uglify:production' ]);
grunt.registerTask('default', [ 'less:development', 'uglify:development', 'watch' ]);
};
