2015 - basta! 2015, de: javascript und build
TRANSCRIPT
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 [email protected] 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 [email protected] my smtp