BOULDER JS

FEB 19, 2014 - DEHRU CROMER

I'M NOT AN EXPERT!

I'm a user

I can only show you how I use these tools

Bower.io

runs over git
package agnostic
bower.json

npm install -g bower

A look at bower.json

these are our dependencies

 {
  "name": "demo project",
  "version": "0.0.0",
  "dependencies": {
    "angular": "1.2.6",
    "jquery": "~1.10.2",
    "sass-bootstrap": "~3.0.2",
    "angular-resource": "1.2.6",
    "angular-route": "1.2.6"
  },
  "devDependencies": {
    "angular-mocks": "1.2.6",
    "angular-scenario": "1.2.6"
  }
}

*the default bower.json file generated by the yeoman angular generator

Install all dependencies

install ALL the dependencies listed in bower.json

bower install

Installing a new dependency

bower search underscore 
bower info underscore
bower install underscorebower install underscore#1.5.2bower install underscore --save
bower install angular-mocks --saveDev

misc

bower uninstall <package>
bower cache clean

Defining a package

create bower.json in project root
add version to your bower.json file (semver)
list the main files that the user should reference
version your repo with git tag

don't forget to push your tags!

(optional) register your package

DEFINING PACKAGE MANIFEST

bower.json

 {
  "name": "emc-ui",
  "version": "0.0.6",
  "main": [
    "release/emc-ui.js",
    "release/styles/emc-ui-bootstrap.css"
  ],
  "dependencies": {
   ...
  },
  "devDependencies": {
   ...
  }
}

GIT TAG

git tag -a 0.0.6 -m "sixth version of emc-ui"
git push origin 0.0.6

CONSUMING THE PACKAGE

Option 1: Manually edit the bower.json file of the other project

 {
  "name": "other project",
  "version": "0.0.0",
  "dependencies": {
    "emc-ui": "http://ucas-gitlab.lss.emc.com/gui/emc-ui.git#0.0.6"
  }
}

Option 2: Install with bower command line

 bower install http://ucas-gitlab.lss.emc.com/gui/emc-ui.git#0.0.6

*Note to myself...don't forget to use --offline so you don't need to vpn!

live coding! (1 command)

Let's consume the emc-ui package

Grunt bower HELPER

For JavaScript dependencies, pop this in your HTML file:

<!-- bower:js -->
<!-- endbower -->

Install a Bower component:

bower install jquery --save

Call the Grunt task:

grunt bower-install

You're in business!

<!-- bower:js -->
<script src="bower_components/jquery/jquery.js"></script>
<!-- endbower -->