JavaScript toolchain

1,125 views
851 views

Published on

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.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,125
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
17
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

JavaScript toolchain

  1. 1. BUILD JAVASCRIPT! Dienstag, 11. Februar 14
  2. 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. 3. Dienstag, 11. Februar 14
  4. 4. DEVELOPMENT CYCLE grunt jshint productionalizing concatenate cssmin uglify htmlcompress testing jasmine qunit Dienstag, 11. Februar 14 IDE/Editor
  5. 5. Dienstag, 11. Februar 14
  6. 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. 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. 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. 9. GRUNT: BASE jshint on local file change copy concat on push to repository uglify cssmin karma Dienstag, 11. Februar 14 htmlprocessor
  10. 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. 11. GRUNT: LIVE RELOAD r Edito ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- *.html r rowse B Dienstag, 11. Februar 14 ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- *.js ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- *.css
  12. 12. GRUNT: LIVE RELOAD r Edito ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- *.html r rowse B Dienstag, 11. Februar 14 ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- *.js 1 ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- *.css watches
  13. 13. GRUNT: LIVE RELOAD r Edito 2 save ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- *.html r rowse B Dienstag, 11. Februar 14 ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- *.js 1 ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- *.css watches
  14. 14. GRUNT: LIVE RELOAD r Edito 2 save ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- *.html r rowse B *.js 1 3 request reload Dienstag, 11. Februar 14 ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- *.css watches
  15. 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. 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. 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. 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. 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. 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. 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. 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. 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. 24. RUNNING GRUNT WITH MAVEN • grunt Dienstag, 11. Februar 14 with maven: https://gist.github.com/nadavdav/5308453
  25. 25. EXERCISES tools-grunt-app /ws/04-Toolchain/ ~ Dienstag, 11. Februar 14

×