Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
danielfisher.com
JavaScript
& Build
Daniel Fisher
danielfisher.com
I’m a technician & always concerned about bandwidth
So I ask you to send one packet instead of two
DANIEL...
danielfisher.com
software
I design, develop, deploy, teach, train, coach and speak
HTML5 & WEB, DATA ACCESS & PERFORMANCE,...
danielfisher.com
Agenda
• NPM
• Grunt
• Gulp
• Jasmine
• JsHint
• TsLint
• NPM Revisisted
danielfisher.com
NODE PACKAGE MANAGER
danielfisher.com
What is npm?
• Node.js Package Manager
– Open Source founded by
Isaac Z. Schlueter
– The package manager ...
danielfisher.com
Install a package
:: Local Installation
npm install --save {package name}
:: --save adds package to packa...
danielfisher.com
Uninstall a package
:: Local Installation
npm uninstall --save {package name}
:: Global Installation
npm ...
danielfisher.com
Update all packages
:: Local Installation
npm update
:: Global Installation
npm install --global {package...
danielfisher.com
Package Intellisense
• https://visualstudiogallery.msdn.microsoft.co
m/65748cdb-4087-497e-a394-
2e3449c8e...
danielfisher.com
GRUNT
danielfisher.com
What is Grunt?
• The JavaScript Task Runner
• Most contributions by
Ben Alman (Cowboy)
http://gruntjs.com/
danielfisher.com
Install Grunt
npm install --global grunt-cli
danielfisher.com
Validate Grunt Installation
grunt --version
danielfisher.com
packages.json
//Run: npm init to create package.json
{
"name": "my-project-name",
"version": "0.1.0",
"de...
danielfisher.com
Add dependencies
:: Add package to the devDependencies
npm install {package} --save-dev
Search available ...
danielfisher.com
Restore dependencies
npm install
danielfisher.com
Gruntfile.js Minify JS
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('pa...
danielfisher.com
Gruntfile.js Bundle & Minify JS
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.rea...
danielfisher.com
Custom tasks
grunt.registerTask(
'custom',
'Log some stuff.',
function() {
grunt.log.write('Logging from ...
danielfisher.com
Custom async tasks
grunt.registerTask(
'custom',
'Log some stuff.',
function() {
var done = this.async();...
danielfisher.com
Access configuration data
grunt.log.writeln(
'The meta.name property is: '
+ grunt.config('meta.name')
);
danielfisher.com
Error handling
// Fail synchronously.
grunt.log.error('This is an error message.');
return false;
// Fail...
danielfisher.com
Detect file changes
npm install grunt-contrib-watch --save-dev
danielfisher.com
Detect file changes
grunt.initConfig({
//...
watch: {
js: {
files: ['src/js/vendor/**/*.js'],
tasks: ['co...
danielfisher.com
Detect file changes
grunt watch
danielfisher.com
Grunt Launcher
• https://visualstudiogallery.msdn.microsoft.co
m/dcbc5325-79ef-4b72-960e-0a51ee33a0ff
danielfisher.com
Task Runner Explorer
• https://visualstudiogallery.msdn.microsoft.co
m/8e1b4368-4afb-467a-bc13-
9650572db...
danielfisher.com
GULP
danielfisher.com
What is Gulp?
• A node.js Task Runner
– Most contributions by
Eric Schoffstall (contra)
– Grunt plug-ins ...
danielfisher.com
Install Gulp
npm install --global gulp
danielfisher.com
Run Gulp
gulp
:: Run a specific task
gulp {taskname}
danielfisher.com
Add plugins
npm install gulp-jshint --save-dev
npm install gulp-changed --save-dev
npm install gulp-image...
danielfisher.com
Gulpfile.js Minify Images
var changed = require('gulp-changed');
var imagemin = require('gulp-imagemin');...
danielfisher.com
Gulpfile.js Minify HTML
var changed = require('gulp-changed');
var minifyHTML = require('gulp-minify-html...
danielfisher.com
Gulpfile.js Bundle & Minify JS
var concat = require('gulp-concat');
var stripDebug = require('gulp-strip-...
danielfisher.com
Gulpfile.js Minify CSS
var concat = require('gulp-concat');
var autoprefix = require('gulp-autoprefixer')...
danielfisher.com
Default task with watcher
gulp.task(
'default',
['jshint', 'scripts'],
function() {
gulp.watch(
'./src/sc...
danielfisher.com
JASMINE
danielfisher.com
What is Jasmine
• A JavaScript Testing Framework
– Most contributions by
Gregg Van Hove (slackersoft).
– ...
danielfisher.com
Jasmine for Gulp
• https://www.npmjs.com/package/gulp-
jasmine
danielfisher.com
JSHINT
danielfisher.com
What is JSHint
• Static Code analysis for JavaScript
– Maintained by Mike Pennisi
(jugglinmike) and other...
danielfisher.com
JS Hint for Gulp
• https://www.npmjs.com/package/gulp-jshint
danielfisher.com
TSLINT
danielfisher.com
What is TSLint?
• Static Code analysis for
TypeScript
– Maintained by Palantir
Technologies from New York...
danielfisher.com
TS Lint for Gulp
• https://www.npmjs.com/package/gulp-tslint
danielfisher.com
NPM REVISITED
danielfisher.com
Creating a NPM
npm init
danielfisher.com
Create a user account
npm adduser
danielfisher.com
Publish a package
npm publish
danielfisher.com
Unpublish a package
npm unpublish {package}@{version}
danielfisher.com
Custom Registry
npm install sinopia
sinopa
danielfisher.com
Configure the client
npm set registry=http://localhost:4873
npm set always-auth true
npm adduser registry...
danielfisher.com
Thank you!
danielfisher.com my company
lennybacon.com my blog url
@lennybacon my twitter handle
info@dani...
Prochain SlideShare
Chargement dans…5
×

2015 - Basta! 2015, DE: JavaScript und build

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?

  • Soyez le premier à commenter

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

×