BUILD JAVASCRIPT!

Dienstag, 11. Februar 14
DEVELOPMENT CYCLE
ript
aSc

Jav

ava
J
findbugs, checkstyle

static code analysis

productionalizing
concatenate

developme...
Dienstag, 11. Februar 14
DEVELOPMENT CYCLE
grunt jshint

productionalizing
concatenate

cssmin

uglify

htmlcompress

testing
jasmine
qunit

Dienst...
Dienstag, 11. Februar 14
GRUNTFILE.JS
module.exports = function(grunt) {
var DOC_ROOT = "public_html",
DIST_DIR = "build";
grunt.initConfig({
pkg: ...
GRUNT: BASE
{
"name": "jquery-app",
"version": "0.0.0",
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-jshint": "~...
GRUNT: BASE

copy web files to distribution directory

copy

concatenate file (js, css)

concat

uglify

cssmin

karma

Di...
GRUNT: BASE
jshint

on local file change

copy

concat

on push to repository

uglify

cssmin

karma

Dienstag, 11. Februa...
GRUNT: LIVE RELOAD
{
"name": "jquery-app",
"version": "0.0.0",
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-jshi...
GRUNT: LIVE RELOAD
r

Edito

---------------------------------------------------------------------------------------------...
GRUNT: LIVE RELOAD
r

Edito

---------------------------------------------------------------------------------------------...
GRUNT: LIVE RELOAD
r

Edito

2
save

-------------------------------------------------------------------------------------...
GRUNT: LIVE RELOAD
r

Edito

2
save

-------------------------------------------------------------------------------------...
GRUNT: LIVE RELOAD
r

Edito

2

------------------------------------------------------------------------------------------...
GRUNT: KARMA
{
"name": "jquery-app",
"version": "0.0.0",
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-jshint": "...
GRUNT: KARMA
fooSpec.js
barSpec.js
barSpec.js
fooSpec.js
barSpec.js
barSpec.js

fooSpec.js
barSpec.js
barSpec.js
fooSpec.j...
GRUNT: KARMA
fooSpec.js
barSpec.js
barSpec.js
fooSpec.js
barSpec.js
barSpec.js

fooSpec.js
barSpec.js
barSpec.js
fooSpec.j...
GRUNT: KARMA
fooSpec.js
barSpec.js
barSpec.js
fooSpec.js
barSpec.js
barSpec.js

------------------------------------------...
GRUNT: KARMA
fooSpec.js
barSpec.js
barSpec.js
fooSpec.js
barSpec.js
barSpec.js

fooSpec.js
barSpec.js
barSpec.js
fooSpec.j...
GRUNT: KARMA
fooSpec.js
barSpec.js
barSpec.js
fooSpec.js
barSpec.js
barSpec.js

fooSpec.js
barSpec.js
barSpec.js
fooSpec.j...
GRUNT: KARMA
fooSpec.js
barSpec.js
barSpec.js
fooSpec.js
barSpec.js
barSpec.js

fooSpec.js
barSpec.js
barSpec.js
fooSpec.j...
GRUNT: KARMA
fooSpec.js
barSpec.js
barSpec.js
fooSpec.js
barSpec.js
barSpec.js

fooSpec.js
barSpec.js
barSpec.js
fooSpec.j...
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
Upcoming SlideShare
Loading in...5
×

JavaScript toolchain

509

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

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

No notes for slide

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×