javascript toolchain

BUILD JAVASCRIPT!

Dienstag, 11. Februar 14

DEVELOPMENT CYCLE

static code analysis

development

productionalizing

concatenate

minimize

testing

unit test

component tests

findbugs, checkstyle

IDEcompile

testing

jUnit

selenium

JavaScriptJava


DEVELOPMENT CYCLE

grunt jshint

IDE/Editor

productionalizing

cssmin

htmlcompress

testing

jasmine

qunit

uglify

concatenate


GRUNTFILE.JSmodule.exports = function(grunt) { var DOC_ROOT = "public_html", DIST_DIR = "build";

grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), copy: { dist: { files: [ { expand: true, src: [DOC_ROOT + '/**'], dest: DIST_DIR } ] } }, [...] }};


GRUNT: BASE{ "name": "jquery-app", "version": "0.0.0", "devDependencies": { "grunt": "~0.4.1", "grunt-contrib-jshint": "~0.6.0", "grunt-contrib-nodeunit": "~0.2.0", "grunt-contrib-concat": "~0.1.3", "grunt-contrib-uglify": "~0.2.0", "grunt-contrib-copy": "~0.4.1", "grunt-contrib-clean": "~0.4.1", "grunt-contrib-cssmin": "~0.6.1", "grunt-htmlcompressor": "~0.1.8", "grunt-contrib-watch": "~0.3.1", "grunt-regarde": "~0.1.1", "grunt-contrib-connect": "0.1.2", "grunt-contrib-livereload": "0.1.1" "grunt-open": "~0.2.2", "grunt-karma": "~0.6.1", "karma": "~0.10.1", "karma-chrome-launcher": "~0.1.0", "karma-jasmine": "~0.1.0", "karma-qunit": "~0.1.0", "karma-html2js-preprocessor": "~0.1" }}


GRUNT: BASE

jshint

copy

concat

uglify cssmin htmlprocessor

karma

checkstyle !ndbugs

copy web !les to distribution directory

concatenate !le (js, css)

minimize

run tests


GRUNT: BASE

jshint

copy

concat

uglify cssmin htmlprocessor

karma

on local !le change

on push to repository


GRUNT: LIVE RELOAD{ "name": "jquery-app", "version": "0.0.0", "devDependencies": { "grunt": "~0.4.1", "grunt-contrib-jshint": "~0.6.0", "grunt-contrib-nodeunit": "~0.2.0", "grunt-contrib-concat": "~0.1.3", "grunt-contrib-uglify": "~0.2.0", "grunt-contrib-copy": "~0.4.1", "grunt-contrib-clean": "~0.4.1", "grunt-contrib-cssmin": "~0.6.1", "grunt-htmlcompressor": "~0.1.8", "grunt-contrib-watch": "~0.3.1", "grunt-regarde": "~0.1.1", "grunt-contrib-connect": "0.1.2", "grunt-contrib-livereload": "0.1.1" "grunt-open": "~0.2.2", "grunt-karma": "~0.6.1", "karma": "~0.10.1", "karma-chrome-launcher": "~0.1.0", "karma-jasmine": "~0.1.0", "karma-qunit": "~0.1.0", "karma-html2js-preprocessor": "~0.1" }}


GRUNT: LIVE RELOAD---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

*.html *.js *.css

---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

Editor

Browser



---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

*.html *.js *.css

---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

Editor

Browserwatches1



---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

*.html *.js *.css

---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

Editor

Browser

save

2

watches1



---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

*.html *.js *.css

---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

Editor

Browser

save

2

watches1

request reload

3



---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

*.html *.js *.css

---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

Editor

Browser

save

2

watches1

request reload

3

load

4


GRUNT: KARMA{ "name": "jquery-app", "version": "0.0.0", "devDependencies": { "grunt": "~0.4.1", "grunt-contrib-jshint": "~0.6.0", "grunt-contrib-nodeunit": "~0.2.0", "grunt-contrib-concat": "~0.1.3", "grunt-contrib-uglify": "~0.2.0", "grunt-contrib-copy": "~0.4.1", "grunt-contrib-clean": "~0.4.1", "grunt-contrib-cssmin": "~0.6.1", "grunt-htmlcompressor": "~0.1.8", "grunt-contrib-watch": "~0.3.1", "grunt-regarde": "~0.1.1", "grunt-contrib-connect": "0.1.2", "grunt-contrib-livereload": "0.1.1" "grunt-open": "~0.2.2", "grunt-karma": "~0.6.1", "karma": "~0.10.1", "karma-chrome-launcher": "~0.1.0", "karma-jasmine": "~0.1.0", "karma-qunit": "~0.1.0", "karma-html2js-preprocessor": "~0.1" }}


GRUNT: KARMA---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

*.html *.js *.css

---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

fooSpec.jsbarSpec.jsbarSpec.js

Chrome Firefox

Android

iOS


fooSpec.jsbarSpec.jsbarSpec.jsfooSpec.jsbarSpec.jsfooSpec.js

Karma


GRUNT: KARMA---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

*.html *.js *.css

---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------


Chrome Firefox

Android

iOS



Karma

watches 1


GRUNT: KARMA---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

*.html *.js *.css

---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------


Chrome Firefox

Android

iOS



Karma

watches 1register

2


GRUNT: KARMA---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

*.html *.js *.css

---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------


Chrome Firefox

Android

iOS



Karma

watches 1register

2

3changed


GRUNT: KARMA---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

*.html *.js *.css

---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------


Chrome Firefox

Android

iOS



Karma

watches 1register

2

request rerun 4

3changed


GRUNT: KARMA---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

*.html *.js *.css

---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------


Chrome Firefox

Android

iOS



Karma

watches 1register

2

request rerun 4

execute5

3changed


GRUNT: KARMA---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

*.html *.js *.css

---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------

---------------------------------------------------------------------------


Chrome Firefox

Android

iOS



Karma

watches 1register

2

request rerun 4

execute5

test report

6

3changed


RUNNING GRUNT WITH MAVEN

• grunt with maven: https://gist.github.com/nadavdav/5308453


https://gist.github.com/nadavdav/5308453

https://gist.github.com/nadavdav/5308453

EXERCISES

~/ws/04-Toolchain/tools-grunt-app


javascript toolchain

Technology

build grunt

rowse bdienstag

var doc

build javascript

basecopy web files

testing junit seleniumide