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

    1. create bower.json in project root
    2. add version to your bower.json file (semver)
    3. list the main files that the user should reference
    4. 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 -->

    Questions?

    Bower

    By Dehru Cromer

    Made with Slides.com

    Bower

    • 1,024

    More from Dehru Cromer