Your SlideShare is downloading. ×
JavaScript toolchain
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

JavaScript toolchain

411

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.

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
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
411
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
11
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×