Im letzten Blogpost habe ich einige gute Grunt-Plugins für Entwickler kurz vorgestellt. Heute geht es um einen praktischen Anwendungsfall, nämlich das minifien von CSS Dateien. Grunt bietet hierfür das Plugin grunt-contrib-cssmin. Zunächst muss das Plugin in der package.json hinzugefügt werden. Hierzu einfach einen Eintrag bei den devDepencies hinzufügen.
{
"name" : "Projekt",
"title" : "demo",
"version" : "1.0.0",
"devDependencies": {
"grunt": "0.4.1",
"grunt-contrib-cssmin" : "0.6.1",
}
}Das Plugin muss danach nur noch per Konsolenbefehl installiert werden. Dazu einfach folgenden Befehl im Verzeichnis ausführen wo auch die package.json Datei liegt.
npm imstall
Nun muss nur noch das Plugin in das Gruntfile eingefügt und konfiguriert werden. Damit Grunt die installierten Module kennt, erstelle im Gruntfile folgenden Eintrag.
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json')
});
};Im nächsten Schritt wird nun das Plugin konfiguriert. Ich möchte z.B. das alle CSS in einem Verzeichnis minified und mit der Endung .min.css gespeichert werden. Der Konfigurationseintrag dazu sieht folgendermaßen aus:
cssmin: {
minify: {
expand: true,
cwd: 'css/',
src: ['*.css', '!*.min.css'],
dest: 'css/',
ext: '.min.css'
}
}Jetzt ist zwar das Plugin konfiguriert aber noch kein Grund-Task dafür erstellt. Grunt weiss also noch nicht was es tun soll. Dazu laden wir das Module und fügen den cssmin Aufruf im Default-Task hinzu. Bei jedem Start von Grunt wird das minifien also aufgerufen. Das komplette Gruntfile sieht also folgendermaßen aus:
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
cssmin: {
minify: {
expand: true,
cwd: 'css/',
src: ['*.css', '!*.min.css'],
dest: 'css/',
ext: '.min.css'
}
}
});
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.registerTask('default', ['cssmin']);
};Der einfache Aufruf von grunt führt nun dazu das alle Dateien im Verzeichnis css automatisch minified werden. Alle Infos zum Plugin findest Du unter https://github.com/gruntjs/grunt-contrib-cssmin.