Create and maintain your own bower package

Reference: https://bower.io/docs/creating-packages/

Prerequisite:

1. A public git(github/gitlab/bitbucket) repo (for private repos, you need to run a private registry, which won't be discussed in this article).

2. Have bower installed.

A step by step example

1. Have a public git repo ready

I have this really simple sample gitlab repo: https://gitlab.com/christywang/my-bower-package

This pic shows its file structure:

I want to create a bower package with everything inside "css" and "js" folders. So my bower.json is like this:

{
  "name": "christy-bower-package",
  "description": "Christy's bower package example",
  "keywords": [
    "css",
    "js"
  ],
  "license": "MIT",
  "ignore": [
    "/*",
    "!/js",
    "!/css"
  ],
  "dependencies": {
    "jquery": "1.9.1 - 3",
    "bootstrap": "3.3.7"
  }
}
           

If you have questions on what each field means, please read bower specs: https://github.com/bower/spec/blob/master/json.md

2. register the package

2.1 Run command to register package

The command to register is:

bower register <my-package-name> <git-endpoint>
      

So I run:

bower register christy-bower-package https://gitlab.com/christywang/my-bower-package.git
      

The following is what happens:

2.2 Check successful registration

Bower decides package version based on tags. Since I haven't pushed any tag to my repo yet. As you can see in the following picture, when I run "bower info christy-bower-package", it shows at the end, "No versions available":

3. Add  version to the package

3.1 create a git tag and push to remote

git tag 'v0.0.1'
git push origin master --tag
      

3.2 Check version successfully added

bower info christy-bower-package
      

4. Install the package

Now If I run:

bundle install christy-bower-package
      

As you can see in the above picture. It downloads my christy-bower-package, also the two denpendency I listed out in bower.json: bootstrap and jquery. The downloaded file structure is like this:

5. Maintain the package

Any time I want to release a new version of my package, I can just add a tag with increasing version number. But it's a bit of manual work, luckily, there's a grunt plugin(grunt-bump) that helps automate this process: https://github.com/vojtajina/grunt-bump

5.1 Create a package.json file with content: {}

5.2 Install grunt and then install grunt-bump

npm install grunt --save-dev
npm install grunt-bump --save-dev
      

After successful installation, a node_modules folder will be added, and Package.json looks like this:

5.3 Add a .gitignore file and ignore node_modules folder

Since I don't want node_modules folder appear in git repo. Add the following .gitignore file:

5.4 Set custom grunt bump configuration and load the plugin:

The default config for grunt bump is:

Since I only want to change some of the config properties, the following is my Grutfile.js:

module.exports = function(grunt) {
  grunt.initConfig({
    bump: {
      options: {
        files: ['bower.json'],
        commitFiles: ['-a'],
        pushTo: 'origin'
      }
    }
  });

  grunt.loadNpmTasks('grunt-bump');
};


      

5.4 Add version field to bower.json

Add version field to bower.json so that grunt bump plugin knows which version to start with:

5.5 Use grunt bump to commit changes and bump the version

grunt bump provides a set of commands to control version. The following is a screenshot of some of the commands available. Please visit its git repo to learn more.https://github.com/vojtajina/grunt-bump

The "grunt bump" command will do the following:

1.Look into "bower.json" file for "version" field. And the value will be the starting version.

2.It will check all files in the repo, commit current file changes. And add a commit message 'Release v%VERSION%'.

3.It will create a tag with specified tag name and tag message.

4.It will push to remote 'origin'.

Run:

grunt bump
      

5.7 Install the package again and confirm that version has been bumped

Run:

bower install christy-bower-package