Javascript- und CSS-
Resourcenverwaltung mit

grunt.js

Mario Rutz

@basis42 --- http://www.basis42.de

Mario Rutz

  • Erste Programmiersprache Assembler (6510)
  • OOP in Java, C++
  • seit 1999 Webentwickler
  • PHP Einstieg mit PHP3
  • Javascript als 2. Sprache
  • und wenn es mich beißt auch gerne mal wieder Java!

Was ist grunt.js?

Entwickelt wird grunt.js von Ben Alman, die Projektwebsite unter gruntjs.com sagt:

Grunt is a task-based command line build tool for JavaScript projects

Was kann grunt.js für uns tun?

CSS und Javascript

  • Minifizieren
  • Concatinieren
  • Linting
  • Compilieren von Sass / Scss
  • Watch auf Dateien und Ordner
  • Integrierter Webserver

... und eine Auswahl an weiteren Tasks:

  • Handling von minifizierten Resourcen(Versionierung und html Manipuilation)
  • automatisiertes Testen mit jasmine und phantom.js
  • Minifizierung von Images
  • Compilierung von LESS / Compass / CoffeeScript / ...
  • ... alles ist möglich!

Warum grunt.js?

  • Javascript ist für Webentwickler natürliche Sprache
  • Einfach lesbare Syntax (vgl. z.B. Ant und Rake)
  • Klassische Frontend-Tasks Out-of-the-box
  • Sehr flache Lernkurve
  • Erweiterbar
  • Gut in bestehenden Projekten einsetzbar

Installation

  • grunt.js version >= 0.4 (momentan 0.4.1)
  • Vorraussetzung ist node.js version >= 0.8
mario@ubuntu:~/sudo npm install -g grunt-cli
mario@ubuntu:~/sudo npm install grunt

Projektaufbau

besteht im Wesentlichen aus:

  • Gruntfile.js
  • package.json

package.json

Verwaltung von Dependancies / Plugins via npm

Beispiel package.json:


  {
    "name": "Build_example_app",
    "version": "0.1.0",
    "dependencies": {
      "grunt": "~0.4",
      "grunt-contrib-watch" : "~0.5",
      "grunt-contrib-uglify" : "~0.2",
      "grunt-contrib-cssmin" : "~0.4",
      "grunt-contrib-sass" : "https://github.com/basis42/grunt-..."
    }
  }

Gruntfile.js

minimales Beispiel 
module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    cssmin : {
      compress : {
        files : {'../css/all.min.css' : ['../css/all.css']}
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-cssmin');

  grunt.registerTask('default', ['cssmin']);
};
mario@ubuntu:~/grunt.js_talk/example/build$ grunt
Running "cssmin:compress" (cssmin) task
File ../css/all.min.css created.
Uncompressed size: 743 bytes.
Compressed size: 244 bytes gzipped (696 bytes minified).

Done, without errors.
mario@ubuntu:~/grunt.js_talk/example/build$

Etwas komplexeres Beispiel

module.exports = function(grunt) {
  grunt.initConfig({
    lint : {
      files : [ 'grunt.js', '../js/**/*.js' ]
    },
    watch : {
      options : {
        livereload : true,
        spawn: false
      },
      css : {
        files : ['../css/**/*.scss'],
        tasks : ['sass', 'cssmin']
      },
      js : {
        files : ['../js/**/*.js'],
        tasks : 'min'
      }
    },
    uglify : {
      js : {
        files : {'../js/app.min.js' : ['../js/app.min.js']}
      }
    },
    sass : {
      scss : {
        options : {
          debugInfo : true,
          lineNumber : true
        },
        files : {'../css/all.css' : ['../css/main.scss']}
      }
    },
    cssmin : {
      compress : {
        files : {'../css/all.min.css' : ['../css/all.css']}
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-sass');
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.loadNpmTasks('grunt-contrib-uglify');

  grunt.loadTasks('example-local-plugin/tasks');

  grunt.registerTask('default', ['sass', 'cssmin', 'uglify']);
};
mario@ubuntu:~/grunt.js_talk/example/build$ grunt
Running "sass:scss" (sass) task

Running "cssmin:compress" (mincss) task
File ../css/all.min.css created.
Uncompressed size: 743 bytes.
Compressed size: 244 bytes gzipped (696 bytes minified).

Running "uglify:js" (uglify) task
File "../js/app.min.js" created.
Uncompressed size: 75 bytes.
Compressed size: 85 bytes gzipped (75 bytes minified).

Done, without errors.
mario@ubuntu:~/grunt.js_talk/example/build$

Plugins

  • Lokale Plugins
  • Plugins via npm

Lokal definiertes Plugin

Gruntfile.js: 

// local defined taks
grunt.loadTasks('example-local-plugin/tasks');

example-local-plugin/tasks/example.tasks.js: 

'use strict';

module.exports = function(grunt) {

  grunt.registerTask('hello', 'Write greeting to console.', function(){
    console.log('Hello! This is the hello task!');
  });
};

John Resig - ECMAScript 5 Strict Mode, JSON, and More
Strict Mode is a new feature in ECMAScript 5 that allows you to place a program, or a function, in a "strict" operating context. This strict context prevents certain actions from being taken and throws more exceptions.
Strict mode helps out in a couple ways:
  • It catches some common coding bloopers, throwing exceptions.
  • It prevents, or throws errors, when relatively "unsafe" actions are taken (such as gaining access to the global object).
  • It disables features that are confusing or poorly thought out.

Plugins via npm

wo wird grunt.js verwendet?

  • Großer Teil des jQuery Ecosystems (jquery, qunit, jqueryui, sizzle, ...)
  • Yeoman
  • reveal.js
  • ...

Alternativen

  • Ant (Plugins / Erweiterungen sind recht aufwendig einzupflegen, krude Syntax)
  • Phing (keine Frontend-Tasks Out of the box)
  • brunch.io (Stärken vor allem in Scaffolding)
  • jake (sehr wenige Tasks Out of the box)
  • Weitere

Fragen?

Links

grunt.js Projektseite

node.js Projektseite

npm - Node Package Manager Projektseite

Vorgestelle Beispiele auf github.com