Dieser Artikel ist älter als zwei Jahre und womöglich veraltet!

Zeit sparen mit Grunt

Mit dem Tool Grunt ist es möglich wiederkehrende Aufgaben beim Entwickeln von JavaScript-Bibliotheken zu automatisieren.

Grunt-Logo

Beim Entwickeln meiner Strichcode-Bibliothek bin ich auf Grunt gestoßen und will es jetzt nicht mehr missen.

Installation

Unter der Voraussetzung von Node.js kann man Grunt einfach mit dem folgenden Befehl installieren:

1npm install -g grunt-cli

Konfigurationsdatei

Zur Konfiguration wird eine Datei namens Gruntfile.js angelegt, in der die Aufgaben definiert werden. Hier ist ein Beispiel einer Konfigurationsdatei, wie ich sie aktuell in meiner Strichcode-Bibliothek verwende:

 1module.exports = function(grunt) {
 2
 3    // Project configuration
 4    grunt.initConfig({
 5        pkg: grunt.file.readJSON('package.json'),
 6        uglify: {
 7            options: {
 8                banner: '/*\n* Copyright (c) <%= grunt.template.today("yyyy") %> Johannes Mittendorfer (http://johannes-mittendorfer.com)\n* Licensed under the MIT License (LICENSE.txt).\n*\n* Version <%= pkg.version %> <%= grunt.template.today("yyyy-mm-dd") %> \n*/\n\n'
 9            },
10            build: {
11                src: 'src/<%= pkg.name %>.js',
12                dest: 'dist/<%= pkg.name %>.min.js'
13            }
14        },
15        coffeelint: {
16            app: ['src/<%= pkg.name %>.coffee'],
17            options: {
18                'max_line_length': {
19                    'level': 'ignore'
20                },
21                'arrow_spacing': {
22                    'level': 'warning'
23                },
24                'line_endings': {
25                    'level': 'warning'
26                },
27                'no_empty_param_list': {
28                    'level': 'warning'
29                }
30            }
31        },
32        jshint: {
33            options: {
34                curly: true,
35                eqeqeq: true,
36                eqnull: true,
37                browser: true,
38                globals: {
39                    jQuery: true
40                },
41            },
42            uses_defaults: ['src/**/*.js'],
43        },
44        qunit: {
45            all: ['tests/**/*.html']
46        },
47        jquerymanifest: {
48            options: {
49                source: grunt.file.readJSON('package.json'),
50                overrides: {
51                    name: "ean13",
52                    title: "jQuery EAN 13",
53                    author: {
54                        name: "Johannes Mittendorfer",
55                        url: "http://johannes-mittendorfer.com"
56                    },
57                    homepage: "https://github.com/joushx/jQuery.EAN13",
58                    demo: "http://demo.johannes-mittendorfer.com/jquery-ean13",
59                    docs: "https://github.com/joushx/jQuery.EAN13/blob/master/README.md"
60                }
61            }
62        },
63        coffee: {
64            compile: {
65                files: {
66                    'dist/<%= pkg.name %>.js': 'src/<%= pkg.name %>.coffee'
67                }
68            }
69        }
70    });
71
72    // Load the plugin that provides the "uglify" task.
73    grunt.loadNpmTasks('grunt-contrib-uglify');
74    grunt.loadNpmTasks('grunt-contrib-jshint');
75    grunt.loadNpmTasks('grunt-contrib-qunit');
76    grunt.loadNpmTasks('grunt-jquerymanifest');
77    grunt.loadNpmTasks('grunt-contrib-coffee');
78    grunt.loadNpmTasks('grunt-coffeelint');
79
80    // Default task(s).
81    grunt.registerTask('default', ['coffeelint', 'coffee', 'jshint', 'qunit', 'uglify', 'jquerymanifest']);
82
83};

Dadurch wird die Coffeescript-Datei mit coffeelint überprüft, in Javascript umgewandelt, diese Datei geprüft, verkleinert und mit den Copyright-Headern ausgestattet. Außerdem werden die definierten Unit-Tests ausgeführt und eine Konfigurationsdatei für das jQuery-Plugin-Verzeichnis erstellt.

Ausführen

Ausführen lassen sich die Aufgaben anschließend einfach mit

1grunt