Part of the workshop "JavaScript for the enterprise" held at the the /ch/open/ Workshop Tage 2013. Covers the build tool chain for JavaScript based on grunt et al.

1. BUILD JAVASCRIPT!
Dienstag, 11. Februar 14

2. DEVELOPMENT CYCLE
ript
aSc
Jav
ava
J
findbugs, checkstyle
static code analysis
productionalizing
concatenate
development
compile
minimize
testing
unit test
component tests
Dienstag, 11. Februar 14
testing
jUnit
selenium
IDE

3. Dienstag, 11. Februar 14

4. DEVELOPMENT CYCLE
grunt jshint
productionalizing
concatenate
cssmin
uglify
htmlcompress
testing
jasmine
qunit
Dienstag, 11. Februar 14
IDE/Editor

5. Dienstag, 11. Februar 14

6. GRUNTFILE.JS
module.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
}
]
}
},
[...]
}
};
Dienstag, 11. Februar 14

7. 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"
}
}
Dienstag, 11. Februar 14

8. GRUNT: BASE
copy web files to distribution directory
copy
concatenate file (js, css)
concat
uglify
cssmin
karma
Dienstag, 11. Februar 14
findbugs
checkstyle
jshint
htmlprocessor
minimize
run tests

9. GRUNT: BASE
jshint
on local file change
copy
concat
on push to repository
uglify
cssmin
karma
Dienstag, 11. Februar 14
htmlprocessor

10. 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"
}
}
Dienstag, 11. Februar 14

11. GRUNT: LIVE RELOAD
r
Edito
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
*.html
r
rowse
B
Dienstag, 11. Februar 14
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
*.js
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
*.css

12. GRUNT: LIVE RELOAD
r
Edito
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
*.html
r
rowse
B
Dienstag, 11. Februar 14
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
*.js
1
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
*.css
watches

13. GRUNT: LIVE RELOAD
r
Edito
2
save
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
*.html
r
rowse
B
Dienstag, 11. Februar 14
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
*.js
1
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
*.css
watches

14. GRUNT: LIVE RELOAD
r
Edito
2
save
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
*.html
r
rowse
B
*.js
1
3
request reload
Dienstag, 11. Februar 14
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
*.css
watches

15. GRUNT: LIVE RELOAD
r
Edito
2
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
save
4
r
rowse
B
*.html
*.js
load
1
3
request reload
Dienstag, 11. Februar 14
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
*.css
watches

16. 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"
}
}
Dienstag, 11. Februar 14

17. GRUNT: KARMA
fooSpec.js
barSpec.js
barSpec.js
fooSpec.js
barSpec.js
barSpec.js
fooSpec.js
barSpec.js
barSpec.js
fooSpec.js
barSpec.js
fooSpec.js
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
*.html
Chrome
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
*.js
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
*.css
Firefox
Android
iOS
Karma
Dienstag, 11. Februar 14

18. GRUNT: KARMA
fooSpec.js
barSpec.js
barSpec.js
fooSpec.js
barSpec.js
barSpec.js
fooSpec.js
barSpec.js
barSpec.js
fooSpec.js
barSpec.js
fooSpec.js
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
*.html
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
*.js
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
*.css
watches
Chrome
1
Firefox
Android
iOS
Karma
Dienstag, 11. Februar 14

19. GRUNT: KARMA
fooSpec.js
barSpec.js
barSpec.js
fooSpec.js
barSpec.js
barSpec.js
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
fooSpec.js
barSpec.js
barSpec.js
fooSpec.js
barSpec.js
fooSpec.js
*.html
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
*.js
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
*.css
watches
register
Chrome
1
2
Firefox
Android
iOS
Karma
Dienstag, 11. Februar 14

20. GRUNT: KARMA
fooSpec.js
barSpec.js
barSpec.js
fooSpec.js
barSpec.js
barSpec.js
fooSpec.js
barSpec.js
barSpec.js
fooSpec.js
barSpec.js
fooSpec.js
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
changed
3
*.html
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
*.js
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
*.css
watches
register
Chrome
1
2
Firefox
Android
iOS
Karma
Dienstag, 11. Februar 14

21. GRUNT: KARMA
fooSpec.js
barSpec.js
barSpec.js
fooSpec.js
barSpec.js
barSpec.js
fooSpec.js
barSpec.js
barSpec.js
fooSpec.js
barSpec.js
fooSpec.js
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
changed
3
*.html
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
*.js
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
*.css
watches
register
Chrome
1
2
Firefox
Android
request rerun
4
iOS
Karma
Dienstag, 11. Februar 14

22. GRUNT: KARMA
fooSpec.js
barSpec.js
barSpec.js
fooSpec.js
barSpec.js
barSpec.js
fooSpec.js
barSpec.js
barSpec.js
fooSpec.js
barSpec.js
fooSpec.js
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
changed
3
*.html
5
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
*.js
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
*.css
execute
watches
register
Chrome
1
2
Firefox
Android
request rerun
4
iOS
Karma
Dienstag, 11. Februar 14

23. GRUNT: KARMA
fooSpec.js
barSpec.js
barSpec.js
fooSpec.js
barSpec.js
barSpec.js
fooSpec.js
barSpec.js
barSpec.js
fooSpec.js
barSpec.js
fooSpec.js
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
changed
3
*.html
5
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
*.js
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
*.css
execute
watches
register
Chrome
2
Firefox
Android
iOS
request rerun
6
test report
Dienstag, 11. Februar 14
1
4
Karma

24. RUNNING GRUNT WITH
MAVEN
• grunt
Dienstag, 11. Februar 14
with maven: https://gist.github.com/nadavdav/5308453

25. EXERCISES
tools-grunt-app
/ws/04-Toolchain/
~
Dienstag, 11. Februar 14