• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
JavaScript toolchain
 

JavaScript toolchain

on

  • 331 views

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.

Statistics

Views

Total Views
331
Views on SlideShare
331
Embed Views
0

Actions

Likes
0
Downloads
6
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    JavaScript toolchain JavaScript toolchain Presentation Transcript

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