Grunt erleichtert definitiv die Entwicklungsarbeit. Aber wie benutze ich es?

Grunt ist abhängig von node.js bzw. dessen Paketmanager npm. Diese müssen folglich vorher installiert sein.
Im Projektverzeichnis sollte eine Datei package.json vorhanden sein:

{
  "name": "myTool",
  "description": "describe the tool"
}

Danach kann Grunt für das Projekt installiert bzw. aktiviert werden:

$ npm install grunt --save-dev

Dadurch wird neues Verzeichnis node_modules im Projektverzeichnis erstellt und Grunt kann benutzt werden. Die Option –save-dev ergänzt/erweitert die devDependencies in package.json um grunt. Analog für verwendete Grunt-Plugins gilt:

$ npm install grunt-contrib-concat --save-dev
$ npm install grunt-contrib-cssmin --save-dev
$ npm install grunt-contrib-uglify --save-dev
$ npm install grunt-contrib-watch --save-dev

Anschließend sind auch die installierten Plugins einsatzbereit, bspw.

$ grunt watch

Die Konfigurationsdatei Gruntfile.js sieht in etwa so aus:

  // Creating a wrapper
module.exports = function(grunt){
    // Initializing configuration objects
  grunt.initConfig({
      // Reading 'package.json' so that we can use setting given there
    pkg : grunt.file.readJSON('package.json'),
      // specifying the settings for css file minification
    cssmin : {
      backend : {
        expand : true,
        cwd : 'web/verwaltung/css/',
        src : [ '*.css', '!*.min.css' ],
        dest : 'web/verwaltung/css/',
        ext : '.min.css'
      },
      frontend : {
        expand : true,
        cwd : 'web/styles/',
        src : [ '*.css', '!*.min.css' ],
        dest : 'web/styles/',
        ext : '.min.css'
      },
      options: {
        banner: '/*! <%= pkg.name %> - <%= grunt.template.today("yyyy-mm-dd H:M") %> */'
      }
    },
      // specifying the settings for js file minification
    uglify : {
      backend: {
        files: {
          'web/verwaltung/js/be.min.js': ['web/js/jquery.jnotify.js','web/js/shared/dialog-service.js','web/verwaltung/js/app.js']
        }
      },
      frontendApp: {
        files: {
          'web/js/app.min.js': ['web/js/jquery.jnotify.js','web/js/shared/dialog-service.js','web/js/snv.js']
        }
      },
      frontendNgGrid: {
        files: {
          'web/js/angular-gridster.min.js': ['web/js/angular-gridster.js']
        }
      },
      options: {
        banner: '/*! <%= pkg.name %> - <%= grunt.template.today("yyyy-mm-dd H:M") %> */'
      }
    },
      // @see http://www.thegeekstuff.com/2014/10/grunt-contrib-watch-automate/
    watch: {
      backend: {
        files: ['web/verwaltung/css/*.css','web/verwaltung/js/*.js'],
        tasks: ['minifyBE'],
        options: {
          spawn:false,
          event:['all']
        }
      },
      frontend: {
        files: ['web/styles/*.css','web/js/*.js'],
        tasks: ['minifyFE'],
        options: {
          spawn:false,
          event:['all']
        }
      }
    }
  });
    // Loading grunt-packages
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-watch');
    // Registering tasks
  grunt.registerTask( 'minifyBE', [ 'cssmin:backend', 'uglify:backend' ] );
  grunt.registerTask( 'minifyFE', [ 'cssmin:frontend', 'uglify:frontendApp', 'uglify:frontendNgGrid' ] );
}

Die mit registerTask() hinterlegten Aufgaben können mittels Konsole auch separat gestartet werden:

$ grunt minifyBE