Successfully reported this slideshow.
Your SlideShare is downloading. ×

2015 - Basta! 2015, DE: JavaScript und build

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad

Check these out next

1 of 55 Ad

2015 - Basta! 2015, DE: JavaScript und build

Download to read offline

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?

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?

Advertisement
Advertisement

More Related Content

Slideshows for you (20)

Viewers also liked (20)

Advertisement

Similar to 2015 - Basta! 2015, DE: JavaScript und build (20)

More from Daniel Fisher (20)

Advertisement

Recently uploaded (20)

2015 - Basta! 2015, DE: JavaScript und build

  1. 1. danielfisher.com JavaScript & Build Daniel Fisher
  2. 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. 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. 4. danielfisher.com Agenda • NPM • Grunt • Gulp • Jasmine • JsHint • TsLint • NPM Revisisted
  5. 5. danielfisher.com NODE PACKAGE MANAGER
  6. 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. 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. 8. danielfisher.com Uninstall a package :: Local Installation npm uninstall --save {package name} :: Global Installation npm uninstall -g {package name}
  9. 9. danielfisher.com Update all packages :: Local Installation npm update :: Global Installation npm install --global {package name} npm install -g {package name}
  10. 10. danielfisher.com Package Intellisense • https://visualstudiogallery.msdn.microsoft.co m/65748cdb-4087-497e-a394- 2e3449c8e61e
  11. 11. danielfisher.com GRUNT
  12. 12. danielfisher.com What is Grunt? • The JavaScript Task Runner • Most contributions by Ben Alman (Cowboy) http://gruntjs.com/
  13. 13. danielfisher.com Install Grunt npm install --global grunt-cli
  14. 14. danielfisher.com Validate Grunt Installation grunt --version
  15. 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. 16. danielfisher.com Add dependencies :: Add package to the devDependencies npm install {package} --save-dev Search available plugins: https://github.com/gruntjs
  17. 17. danielfisher.com Restore dependencies npm install
  18. 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. 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. 20. danielfisher.com Custom tasks grunt.registerTask( 'custom', 'Log some stuff.', function() { grunt.log.write('Logging from ' + this.name).ok(); } );
  21. 21. danielfisher.com Custom async tasks grunt.registerTask( 'custom', 'Log some stuff.', function() { var done = this.async(); setTimeout( function() { done(); }, 1000 ); } );
  22. 22. danielfisher.com Access configuration data grunt.log.writeln( 'The meta.name property is: ' + grunt.config('meta.name') );
  23. 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. 24. danielfisher.com Detect file changes npm install grunt-contrib-watch --save-dev
  25. 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. 26. danielfisher.com Detect file changes grunt watch
  27. 27. danielfisher.com Grunt Launcher • https://visualstudiogallery.msdn.microsoft.co m/dcbc5325-79ef-4b72-960e-0a51ee33a0ff
  28. 28. danielfisher.com Task Runner Explorer • https://visualstudiogallery.msdn.microsoft.co m/8e1b4368-4afb-467a-bc13- 9650572db708
  29. 29. danielfisher.com GULP
  30. 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. 31. danielfisher.com Install Gulp npm install --global gulp
  32. 32. danielfisher.com Run Gulp gulp :: Run a specific task gulp {taskname}
  33. 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. 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. 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. 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. 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. 38. danielfisher.com Default task with watcher gulp.task( 'default', ['jshint', 'scripts'], function() { gulp.watch( './src/scripts/*.js', function(){ gulp.run('jshint', 'scripts'); } ); } );
  39. 39. danielfisher.com JASMINE
  40. 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. 41. danielfisher.com Jasmine for Gulp • https://www.npmjs.com/package/gulp- jasmine
  42. 42. danielfisher.com JSHINT
  43. 43. danielfisher.com What is JSHint • Static Code analysis for JavaScript – Maintained by Mike Pennisi (jugglinmike) and others. • http://jshint.com/
  44. 44. danielfisher.com JS Hint for Gulp • https://www.npmjs.com/package/gulp-jshint
  45. 45. danielfisher.com TSLINT
  46. 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. 47. danielfisher.com TS Lint for Gulp • https://www.npmjs.com/package/gulp-tslint
  48. 48. danielfisher.com NPM REVISITED
  49. 49. danielfisher.com Creating a NPM npm init
  50. 50. danielfisher.com Create a user account npm adduser
  51. 51. danielfisher.com Publish a package npm publish
  52. 52. danielfisher.com Unpublish a package npm unpublish {package}@{version}
  53. 53. danielfisher.com Custom Registry npm install sinopia sinopa
  54. 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. 55. danielfisher.com Thank you! danielfisher.com my company lennybacon.com my blog url @lennybacon my twitter handle info@danielfisher.com my smtp

×