JavaScript toolchain

  • 312 views
Uploaded 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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
312
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
9
Comments
0
Likes
0

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