JavaScript toolchain

transcript

BUILD JAVASCRIPT!

Dienstag, 11. Februar 14

DEVELOPMENT CYCLE

static code analysis

development

productionalizing

concatenate

minimize

testing

unit test

component tests

findbugs, checkstyle

IDEcompile

testing

selenium

JavaScriptJava

DEVELOPMENT CYCLE

grunt jshint

IDE/Editor

productionalizing

cssmin

htmlcompress

testing

jasmine

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

concat

uglify cssmin htmlprocessor

checkstyle !ndbugs

copy web !les to distribution directory

concatenate !le (js, css)

minimize

run tests

GRUNT: BASE

jshint

concat

uglify cssmin htmlprocessor

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

watches1

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

*.html *.js *.css

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

Editor

Browser

watches1

request reload

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

*.html *.js *.css

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

Editor

Browser

watches1

request reload

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

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

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

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

*.html *.js *.css

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

Chrome Firefox

Android

watches 1

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

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

*.html *.js *.css

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

Chrome Firefox

Android

watches 1register

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

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

*.html *.js *.css

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

Chrome Firefox

Android

watches 1register

3changed

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

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

*.html *.js *.css

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

Chrome Firefox

Android

watches 1register

request rerun 4

3changed

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

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

*.html *.js *.css

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

Chrome Firefox

Android

watches 1register

request rerun 4

execute5

3changed

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

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

*.html *.js *.css

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

Chrome Firefox

Android

watches 1register

request rerun 4

execute5

test report

3changed

RUNNING GRUNT WITH MAVEN

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

EXERCISES

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

JavaScript toolchain

Technology