2015 - Basta! 2015, DE: JavaScript und build

danielfisher.comJavaScript

& BuildDaniel Fisher

danielfisher.com

I’m a technician & always concerned about bandwidthSo I ask you to send one packet instead of two

DANIEL

My name is Any further questions? Just Ask!

danielfisher.com

softwareI 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 handleinfo@danielfisher.com my smtp

find my services at danielfisher.com

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 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/

danielfisher.com

Install a package:: Local Installationnpm install --save {package name}:: --save adds package to packages.json

:: Global Installationnpm install --global {package name}npm install -g {package name}

danielfisher.com

Uninstall a package:: Local Installationnpm uninstall --save {package name}

:: Global Installationnpm uninstall -g {package name}

danielfisher.com

Update all packages:: Local Installationnpm update

:: Global Installationnpm install --global {package name}npm install -g {package name}

danielfisher.com

Package Intellisense• https://

visualstudiogallery.msdn.microsoft.com/65748cdb-4087-497e-a394-2e3449c8e61e

danielfisher.com

GRUNT

danielfisher.com

What is Grunt?• The JavaScript Task Runner• Most contributions by

Ben Alman (Cowboy)

http://gruntjs.com/

danielfisher.com

Install Gruntnpm install --global grunt-cli

danielfisher.com

Validate Grunt Installationgrunt --version

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" }}

danielfisher.com

Add dependencies:: Add package to the devDependenciesnpm install {package} --save-dev

Search available plugins: https://github.com/gruntjs

danielfisher.com

Restore dependenciesnpm install

danielfisher.com

Gruntfile.js Minify JSmodule.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']);};

danielfisher.comGruntfile.js Bundle & Minify

JSmodule.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']);};

danielfisher.com

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

danielfisher.com

Custom async tasksgrunt.registerTask( 'custom', 'Log some stuff.', function() { var done = this.async(); setTimeout( function() { done(); }, 1000 ); });

danielfisher.com

Access configuration datagrunt.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 asynchronously.done(false);

// Fail task if "foo" task failed or never ran.grunt.task.requires('foo');

// Fail task if "meta.name" config prop is missinggrunt.config.requires('meta.name');

danielfisher.com

Detect file changesnpm install grunt-contrib-watch --save-dev

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); } );

danielfisher.com

Detect file changesgrunt watch

danielfisher.com

Grunt Launcher• https://

visualstudiogallery.msdn.microsoft.com/dcbc5325-79ef-4b72-960e-0a51ee33a0ff

danielfisher.com

Task Runner Explorer• https://

visualstudiogallery.msdn.microsoft.com/8e1b4368-4afb-467a-bc13-9650572db708\

danielfisher.com

GULP

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.

danielfisher.com

Install Gulpnpm install --global gulp

danielfisher.com

Run Gulpgulp

:: Run a specific taskgulp {taskname}

danielfisher.com

Add pluginsnpm install gulp-jshint --save-devnpm install gulp-changed --save-devnpm install gulp-imagemin --save-devnpm install gulp-minify-html --save-dev npm install gulp-concat --save-dev npm install gulp-strip-debug --save-dev npm install gulp-uglify --save-devnpm install gulp-minify-css --save-dev npm install gulp-autoprefixer –save-dev

danielfisher.com

Gulpfile.js Minify Imagesvar 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)); });

danielfisher.com

Gulpfile.js Minify HTMLvar 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)); });

danielfisher.comGulpfile.js Bundle & Minify

JSvar 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/')); });

danielfisher.com

Gulpfile.js Minify CSSvar 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/')); });

danielfisher.com

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

danielfisher.com

JASMINE

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/

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 others.

• http://jshint.com/

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–Most contributions by Ashwin

Ramaswamy (ashwinr)

• https://github.com/palantir/tslint

danielfisher.com

TS Lint for Gulp• https://

www.npmjs.com/package/gulp-tslint

danielfisher.com

NPM REVISITED

danielfisher.com

Creating a NPMnpm init

danielfisher.com

Create a user accountnpm adduser

danielfisher.com

Publish a packagenpm publish

danielfisher.com

Unpublish a packagenpm unpublish {package}@{version}

danielfisher.com

Custom Registrynpm install sinopiasinopa

danielfisher.com

Configure the clientnpm set registry=http://localhost:4873npm set always-auth truenpm adduser registry=http://localhost:4873

C:\Users\D.Fisher\AppData\Roaming\sinopia\htpasswd

C:\Users\D.Fisher\.npmrc

danielfisher.com

Thank you!danielfisher.com my companylennybacon.com my blog url@lennybacon my twitter handleinfo@danielfisher.com my smtp