Building

with

Javascript


featuring npm, grunt, yeoman, bower, and more!


gist-reveal.it/03ed892d1baad2798236

contact info
#Agenda 1. [npm](#npm) 2. [grunt](#grunt) 3. [yeoman](#yeoman) 4. [bower](#bower) 5. [demo](#mean-stack) 6. [and MORE!](#new-tools)
### Requirements: `npm` provides an easy way to install your javascript build tools: npm install -g yo bower grunt-cli
![npm](https://www.npmjs.org/static/img/npm.png) [npmjs.org](npmjs.org)
## package everything package.json [package.json spec](https://www.npmjs.org/doc/files/package.json.html)
install `dependencies`: npm install --production install `dependencies` && `devDependencies`: npm install
### Saving dependencies Saving `dependencies`: npm install --save MODULE_NAME Saving `dev-dependencies`: npm install --save-dev MODULE_NAME
Start your webserver: npm start Runs whatever you define in `scripts.start`
`node_modules` When to check your [`node_modules` into git](http://www.futurealoof.com/posts/nodemodules-in-git.html) (mikeal)
## grunt ![grunt](https://www.openshift.com/sites/default/files/grunt_logo.gif) [Grunt](http://gruntjs.com/): The Javascript task runner npm install --save-dev grunt
### using grunt Watch your files and automatically reload your webserver when needed: grunt serve Combine and minify your client side sources: grunt build
# OR
## npm run `npm` is also a task runner! Task Automation with [npm run](http://substack.net/task_automation_with_npm_run) (substack)
![browserify](http://browserify.org/images/browserify.png) ![browserify](http://browserify.org/images/wizard_hat_blue.png) [Browserify](http://browserify.org/) lets you `require('modules')` in the browser by bundling up All of your dependencies. npm install -g browserify
## yeoman Scaffolding for Javascript ![yeoman](https://www.openshift.com/sites/default/files/yo-man.png) [Yeoman](http://yeoman.io/) npm install -g yo
## angular-fullstack Testing out the top community-maintained generator: npm install -g generator-angular-fullstack [https://github.com/DaftMonk/generator-angular-fullstack](https://github.com/DaftMonk/generator-angular-fullstack)
# MEAN stack ![MEAN stack](https://www.openshift.com/sites/default/files/mean_logo.png) [Yeoman serves up a real MEAN stack](https://www.openshift.com/blogs/yeoman-serves-up-a-real-mean-stack)
## bower client side dependency management [http://bower.io/](http://bower.io/) ![bower](http://bower.io/img/bower-logo.png)
## rework `rework` or `npm-rework-cli` [rework](https://www.npmjs.org/package/rework) `@import` css from a node module
### resin / resinate [resinate](https://www.npmjs.org/package/resinate) `@import` css from a node module, pre-processing
## New Stuff It's hip to be a stream
[https://github.com/datproject/gasket](https://github.com/datproject/gasket) ![gasket](https://raw.githubusercontent.com/datproject/gasket/master/gasket.png)
***Thanks for following along!*** link to slides: [gist-reveal.it/03ed892d1baad2798236](http://gist-reveal.it/03ed892d1baad2798236)
Runs on Kubernetes Presentation Source