Sie bauen Ihr Backend schon mit einem Build-Server nach aller Kunst der CI? Und wie sieht das mit dem JavaScript-Code aus? Das Bündeln und Minifizieren beispielsweise mithilfe von Uglify und Grunt mit in den Build-Server einzuklinken, ist ja erst der Anfang. Sollte der Build nicht auch "Rot" werden, wenn ein JavaScript-Test von Jasmine fehlschlägt? Ach, und sammeln Sie noch keine Qualitätsmetriken über den clientseitigen Code? Laufen Sie dann nicht Gefahr, in der Scripthölle zu landen?

1. danielfisher.com
JavaScript
& Build
Daniel Fisher

2. danielfisher.com
I’m a technician & always concerned about bandwidth
So I ask you to send one packet instead of two
DANIEL
My name is
Any further questions? Just Ask!

3. danielfisher.com
software
I design, develop, deploy, teach, train, coach and speak
HTML5 & WEB, DATA ACCESS & PERFORMANCE,
SCALABLE & TESTABLE DESIGN, DISTRIBUTED SYSTEMS
& SERVICES, SECURITY & TRUST
lennybacon.com my blog url
@lennybacon my twitter handle
info@danielfisher.com my smtp
find my services at danielfisher.com

4. danielfisher.com
Agenda
• NPM
• Grunt
• Gulp
• Jasmine
• JsHint
• TsLint
• NPM Revisisted

5. danielfisher.com
NODE PACKAGE MANAGER

6. danielfisher.com
What is npm?
• Node.js Package Manager
– Open Source founded by
Isaac Z. Schlueter
– The package manager for
Javascript.
– Installed with node.js!
– Nested dependency trees
– Install modules used in a node.js environment, or
development tools built using node.js such Karma, lint,
minifiers and so on
https://www.npmjs.com/

7. danielfisher.com
Install a package
:: Local Installation
npm install --save {package name}
:: --save adds package to packages.json
:: Global Installation
npm install --global {package name}
npm install -g {package name}

8. danielfisher.com
Uninstall a package
:: Local Installation
npm uninstall --save {package name}
:: Global Installation
npm uninstall -g {package name}

9. danielfisher.com
Update all packages
:: Local Installation
npm update
:: Global Installation
npm install --global {package name}
npm install -g {package name}

10. danielfisher.com
Package Intellisense
• https://visualstudiogallery.msdn.microsoft.co
m/65748cdb-4087-497e-a394-
2e3449c8e61e

11. danielfisher.com
GRUNT

12. danielfisher.com
What is Grunt?
• The JavaScript Task Runner
• Most contributions by
Ben Alman (Cowboy)
http://gruntjs.com/

13. danielfisher.com
Install Grunt
npm install --global grunt-cli

14. danielfisher.com
Validate Grunt Installation
grunt --version

15. danielfisher.com
packages.json
//Run: npm init to create package.json
{
"name": "my-project-name",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.5",
"grunt-contrib-jshint": "~0.10.0",
"grunt-contrib-nodeunit": "~0.4.1",
"grunt-contrib-uglify": "~0.5.0"
}
}

16. danielfisher.com
Add dependencies
:: Add package to the devDependencies
npm install {package} --save-dev
Search available plugins: https://github.com/gruntjs

17. danielfisher.com
Restore dependencies
npm install

18. danielfisher.com
Gruntfile.js Minify JS
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
banner: '/*! <%= pkg.name %> ' +
'<%= grunt.template.today("yyyy-mm-dd") %> */n'
},
build: {
src: 'src/<%= pkg.name %>.js',
dest: 'build/<%= pkg.name %>.min.js'
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask('default', ['uglify']);
};

19. danielfisher.com
Gruntfile.js Bundle & Minify JS
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
banner: '...'
},
js: {
files: { 'build/all.js': 'src/**/*.js' },
options: {
preserveComments: false
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask('default', ['uglify']);
};

20. danielfisher.com
Custom tasks
grunt.registerTask(
'custom',
'Log some stuff.',
function() {
grunt.log.write('Logging from ' + this.name).ok();
}
);

21. danielfisher.com
Custom async tasks
grunt.registerTask(
'custom',
'Log some stuff.',
function() {
var done = this.async();
setTimeout(
function() {
done();
},
1000
);
}
);

22. danielfisher.com
Access configuration data
grunt.log.writeln(
'The meta.name property is: '
+ grunt.config('meta.name')
);

23. danielfisher.com
Error handling
// Fail synchronously.
grunt.log.error('This is an error message.');
return false;
// Fail asynchronously.
done(false);
// Fail task if "foo" task failed or never ran.
grunt.task.requires('foo');
// Fail task if "meta.name" config prop is missing
grunt.config.requires('meta.name');

24. danielfisher.com
Detect file changes
npm install grunt-contrib-watch --save-dev

25. danielfisher.com
Detect file changes
grunt.initConfig({
//...
watch: {
js: {
files: ['src/js/vendor/**/*.js'],
tasks: ['concat:js', 'uglify:js']
}
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.event.on(
'watch',
function(action, filepath, target) {
grunt.log.writeln(target + ': ' + filepath + ' has ' + action);
}
);

26. danielfisher.com
Detect file changes
grunt watch

27. danielfisher.com
Grunt Launcher
• https://visualstudiogallery.msdn.microsoft.co
m/dcbc5325-79ef-4b72-960e-0a51ee33a0ff

28. danielfisher.com
Task Runner Explorer
• https://visualstudiogallery.msdn.microsoft.co
m/8e1b4368-4afb-467a-bc13-
9650572db708

29. danielfisher.com
GULP

30. danielfisher.com
What is Gulp?
• A node.js Task Runner
– Most contributions by
Eric Schoffstall (contra)
– Grunt plug-ins often perform n tasks
• Gulp plug-ins are designed
to do only thing.
– Grunt requires plug-ins for basics
• Gulp has them built-in.
– Grunt uses JSON-like data configuration files
• Gulp uses leaner, simpler JavaScript code.

31. danielfisher.com
Install Gulp
npm install --global gulp

32. danielfisher.com
Run Gulp
gulp
:: Run a specific task
gulp {taskname}

33. danielfisher.com
Add plugins
npm install gulp-jshint --save-dev
npm install gulp-changed --save-dev
npm install gulp-imagemin --save-dev
npm install gulp-minify-html --save-dev
npm install gulp-concat --save-dev
npm install gulp-strip-debug --save-dev
npm install gulp-uglify --save-dev
npm install gulp-minify-css --save-dev
npm install gulp-autoprefixer –save-dev

34. danielfisher.com
Gulpfile.js Minify Images
var changed = require('gulp-changed');
var imagemin = require('gulp-imagemin');
gulp.task(
'imagemin',
function() {
var imgSrc = './src/images/**/*',
imgDst = './build/images';
gulp.src(imgSrc)
.pipe(changed(imgDst))
.pipe(imagemin())
.pipe(gulp.dest(imgDst));
}
);

35. danielfisher.com
Gulpfile.js Minify HTML
var changed = require('gulp-changed');
var minifyHTML = require('gulp-minify-html');
gulp.task(
'htmlpage',
function() {
var htmlSrc = './src/*.html',
htmlDst = './build';
gulp.src(htmlSrc)
.pipe(changed(htmlDst))
.pipe(minifyHTML())
.pipe(gulp.dest(htmlDst));
}
);

36. danielfisher.com
Gulpfile.js Bundle & Minify JS
var concat = require('gulp-concat');
var stripDebug = require('gulp-strip-debug');
var uglify = require('gulp-uglify');
gulp.task(
'scripts',
function() {
gulp.src(['./src/js/lib.js', './src/js/*.js'])
.pipe(concat('script.js'))
.pipe(stripDebug())
.pipe(uglify())
.pipe(gulp.dest('./build/scripts/'));
}
);

37. danielfisher.com
Gulpfile.js Minify CSS
var concat = require('gulp-concat');
var autoprefix = require('gulp-autoprefixer');
var minifyCSS = require('gulp-minify-css');
gulp.task(
'styles',
function() {
gulp.src(['./src/styles/*.css'])
.pipe(concat('styles.css'))
.pipe(autoprefix('last 2 versions'))
.pipe(minifyCSS())
.pipe(gulp.dest('./build/styles/'));
}
);

38. danielfisher.com
Default task with watcher
gulp.task(
'default',
['jshint', 'scripts'],
function() {
gulp.watch(
'./src/scripts/*.js',
function(){
gulp.run('jshint', 'scripts');
}
);
}
);

39. danielfisher.com
JASMINE

40. danielfisher.com
What is Jasmine
• A JavaScript Testing Framework
– Most contributions by
Gregg Van Hove (slackersoft).
– Behavior Driven Development.
– Does not rely on browsers, DOM, or any
JavaScript framework.
– Suited for websites, Node.js projects, or
anywhere that JavaScript can run.
• https://jasmine.github.io/

41. danielfisher.com
Jasmine for Gulp
• https://www.npmjs.com/package/gulp-
jasmine

42. danielfisher.com
JSHINT

43. danielfisher.com
What is JSHint
• Static Code analysis for JavaScript
– Maintained by Mike Pennisi
(jugglinmike) and others.
• http://jshint.com/

44. danielfisher.com
JS Hint for Gulp
• https://www.npmjs.com/package/gulp-jshint

45. danielfisher.com
TSLINT

46. danielfisher.com
What is TSLint?
• Static Code analysis for
TypeScript
– Maintained by Palantir
Technologies from New York
– Most contributions by Ashwin
Ramaswamy (ashwinr)
• https://github.com/palantir/tslint

47. danielfisher.com
TS Lint for Gulp
• https://www.npmjs.com/package/gulp-tslint

48. danielfisher.com
NPM REVISITED

49. danielfisher.com
Creating a NPM
npm init

50. danielfisher.com
Create a user account
npm adduser

51. danielfisher.com
Publish a package
npm publish

52. danielfisher.com
Unpublish a package
npm unpublish {package}@{version}

53. danielfisher.com
Custom Registry
npm install sinopia
sinopa

54. danielfisher.com
Configure the client
npm set registry=http://localhost:4873
npm set always-auth true
npm adduser registry=http://localhost:4873
C:UsersD.FisherAppDataRoamingsinopiahtpasswd
C:UsersD.Fisher.npmrc

55. danielfisher.com
Thank you!
danielfisher.com my company
lennybacon.com my blog url
@lennybacon my twitter handle
info@danielfisher.com my smtp