Script<\/strong><\/p>\nDas Skript selbst h\u00f6rt auf den Namen Gruntfile.js<\/span> und liegt ebenfalls im Hauptverzeichnis.<\/p>\nDas Grunt-Script sieht nun folgenderma\u00dfen aus:<\/p>\n
var grunt = require('grunt');\r\nmodule.exports = function(grunt) {\r\n\r\n grunt.initConfig({\r\n pkg: grunt.file.readJSON('package.json'),\r\n concat: {\r\n options: {\r\n separator: ';'\r\n },\r\n dist: {\r\n src: ['src\/**\/*.js'],\r\n dest: 'dist\/<%= pkg.name %>.js'\r\n }\r\n },\r\n uglify: {\r\n options: {\r\n banner: '\/*! <%= pkg.name %> <%= grunt.template.today(\"dd-mm-yyyy\") %> *\/\\n'\r\n },\r\n dist: {\r\n files: {\r\n 'dist\/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']\r\n }\r\n }\r\n },\r\n jshint: {\r\n files: ['Gruntfile.js', 'src\/**\/*.js', 'test\/**\/*.js'],\r\n options: {\r\n \/\/ options here to override JSHint defaults\r\n globals: {\r\n jQuery: true,\r\n console: true,\r\n module: true,\r\n document: true\r\n }\r\n }\r\n } \r\n });\r\n\r\n grunt.loadNpmTasks('grunt-contrib-uglify');\r\n grunt.loadNpmTasks('grunt-contrib-jshint');\r\n grunt.loadNpmTasks('grunt-contrib-concat');\r\n\r\n grunt.registerTask('test', ['jshint', 'qunit']);\r\n\r\n grunt.registerTask('default', ['jshint', 'concat', 'uglify']);\r\n\r\n};\r\ngrunt.tasks(['default']);\r\n\r\n<\/pre>\nIn dieser Datei werden zun\u00e4chst die einzelnen Plugins konfiguriert.<\/p>\n
\n- pkg:\n
\n- Einlesen der Package-Datei f\u00fcr die o.g. Definition<\/li>\n<\/ul>\n<\/li>\n
- concat:\n
\n- Seperator, der zwischen den einzelnen aneinanderzuh\u00e4ngenden Dateien erg\u00e4nzt wird<\/li>\n
- src definiert den Filter der Quelldateien und dest das Verzeichnis der Ausgabedatei mit den aneinandergereihten JavaScript-Dateien. Dies sollte auf jeden Fall ein Unterverzeichnis sein, in dem sonst keine js-Dateien liegen, um sich nicht versehentlich eine Datei zu \u00fcberschreiben.<\/li>\n<\/ul>\n<\/li>\n
- uglify:\n
\n- das Banner wird im Kopf der Ausgabedatei ausgegeben. Dient rein der Information.<\/li>\n
- files beschreibt zun\u00e4chst die Ausgabedatei und dann die Quelldatei. Diese wird aus den Optionen des concat-Plugins ausgelesen.<\/li>\n<\/ul>\n<\/li>\n
- jshint:\n
\n- files gibt die zu pr\u00fcfenden Dateien an<\/li>\n
- mit den Options kann man bestimmte Verhaltensweisen von jshint steuern. Etwa Pr\u00fcfungen, deaktivieren, die man nicht einhalten kann oder will.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
<\/p>\n
Nach der Konfiguration der Plugins werden nun die Aufrufe des Scripts festgelegt. Dazu werden die Module zun\u00e4chst \u00fcber node.js geladen.<\/p>\n
Zum Schluss werden verschiedene „Profile“ definiert. Hier wird zun\u00e4chst der Name des Profils angegeben und anschlie\u00dfend die Liste der Plugins, die ausgef\u00fchrt werden sollen. Wird kein Profil angegeben, so wird „Default“ ausgef\u00fchrt.<\/p>\n
<\/p>\n
Aufruf<\/strong><\/p>\nNun ist alles definiert, aber wie rufe ich das Ganze nun auf?<\/p>\n
\n- \u00dcber die Kommandozeile:
\n[nodejs-Install-Verzeichnis]\\nodejs\\node.exe Gruntfile.js<\/span><\/li>\n- \u00dcber das NodeJS-Plugin von JetBrains f\u00fcr IntelliJ:
\nEinfach per Rechtsklick auf die Gruntfile.js-Datei und „Run ‚Gruntfile.js'“ ausw\u00e4hlen<\/li>\n<\/ol>\n\u00a0<\/span><\/p>\n <\/p>\n","protected":false},"excerpt":{"rendered":"
Nachdem ich nun JavaScript einigerma\u00dfen verstanden hatte, konnte ich mich dem eigentlichen Problem widmen. Wie also strukturiere ich den JavaScript Code sauber in…<\/p>\n","protected":false},"author":2,"featured_media":493,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[15],"tags":[],"class_list":["post-185","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript"],"_links":{"self":[{"href":"https:\/\/staratnight.de\/blog\/wp-json\/wp\/v2\/posts\/185","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/staratnight.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/staratnight.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/staratnight.de\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/staratnight.de\/blog\/wp-json\/wp\/v2\/comments?post=185"}],"version-history":[{"count":4,"href":"https:\/\/staratnight.de\/blog\/wp-json\/wp\/v2\/posts\/185\/revisions"}],"predecessor-version":[{"id":189,"href":"https:\/\/staratnight.de\/blog\/wp-json\/wp\/v2\/posts\/185\/revisions\/189"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/staratnight.de\/blog\/wp-json\/wp\/v2\/media\/493"}],"wp:attachment":[{"href":"https:\/\/staratnight.de\/blog\/wp-json\/wp\/v2\/media?parent=185"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/staratnight.de\/blog\/wp-json\/wp\/v2\/categories?post=185"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/staratnight.de\/blog\/wp-json\/wp\/v2\/tags?post=185"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}