Kompilieren mit Grunt
#Code

Kompilieren mit Grunt

In einem anderen Artikel hatte ich bereits die Vorteile eines Workflows mit Grunt beschrieben. Heute möchte ich einen kleinen Überblick über einen, mir ans Herzen gewachsenen, Helfer geben.

Grunt erfüllt Aufgaben.

Eine einfache Aufgabe, die die meisten Entwickler benötigen, ist das Kompilieren von Sass, LESS oder Ähnlichem in CSS. Neben CodeKit, und SimpLESS gibt es viele verschiedene Programme, die genau darauf ausgelegt sind. Der Vorteil daran ist, sie sind einfach zu verstehen und zu bedienen, allerdings sind sie in ihrer Erweiterung und Konfiguration relativ eingeschränkt.

Der Grunt-Watch-Task läuft im Hintergrund und beobachtet. In Kombination mit dem Grunt-Less-Task werden Änderungen registriert und neu kompiliert. Der Watch-Task bringt zudem schon die Option des Livereloads mit sich.

Beispiel-Konfiguration:

 

watch: {
  css: {
    files: ['less/**/*.less'],
    tasks: ['less'],
    options: {
      livereload: true
    }
  }
  less: {
    development: {
      options: {
        paths: ['less']
      },
      files: {
        'css/theme.css': 'less/theme.less'
      }
    }
  }
}

 

Für die o. g. Konfiguration werden folgende Plugins benötigt:

contrib-watch
contrib-less

Außerdem natürlich Grunt.

Die Dokumentation zum Grunt contrib-watch und contrib-less gibt es jeweils auf GitHub.