Building

with

Javascript

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

#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)

## Want More Info? 1. [npmjs.org](https://www.npmjs.org) 2. [browserify](http://browserify.org/) 3. [gasket](https://github.com/datproject/gasket) 4. [MEAN stack demo](https://www.openshift.com/blogs/yeoman-serves-up-a-real-mean-stack)

***Thanks for following along!*** link to slides: [gist-reveal.it/03ed892d1baad2798236](http://gist-reveal.it/03ed892d1baad2798236)