Share Your JavaScript Libraries With The World

laziness

Let’s face it, developers are lazy (including myself). Philipp Lenssen agrees with this saying in his post by stating:

Only lazy programmers will want to write the kind of tools that might replace them in the end. Lazy, because only a lazy programmer will avoid writing monotonous, repetitive code – thus avoiding redundancy, the enemy of software maintenance and flexible refactoring. Mostly, the tools and processes that come out of this endeavor fired by laziness will speed up the production.

You, being a brilliant JavaScript developer building this awesome library that everyone has been waiting for, looking for a tool which will help you avoid writing monotonous, repetitive code.

Validating, compiling, minimizing, concatenating and the list goes on, these are the tasks you need to do before releasing your library to the wild.

Fortunately, those are the tasks almost anyone writing JavaScript code needs to do and that’s the problem Ben Alman set out to solve when he created Grunt.

Meet Grunt: The Build Tool for JavaScript

grunt

Grunt is a task-based command line build tool for JavaScript projects that facilitates creating new projects and makes performing repetitive but necessary tasks such as linting, unit testing, concatenating and minifying files (among other things) trivial.

That’s what Grunt aims to be. It has a bunch of built-in tasks that will get you pretty far, with the ability to build your own plugins and scripts that extend the basic functionality.

For more Grunt intro goodness, see Ben’s post on his personal blog and the Bocoup blog.

So, now you are sold and your project is fully automated in just about few minutes of work, now what? Well, now it’s time to distribute it to the people. That’s the whole point of software anyway, we want people to use our stuff.

Bintray + Grunt + grunt-bintray-deploy = Pure Awesomeness

The Grunt ecosystem is huge and it’s growing every day. With literally hundreds of plugins to choose from, you can use Grunt to automate just about anything with a minimum of effort, that’s exactly what I decided to do.

I’ve written a grunt plugin which will help you share and distribute your project to Bintray and from there to the rest of the world.

By using Bintray you are are able to distribute your library through a high speed CDN, your users could point their HTML JavaScript tags directly to a URL Bintray gives you!

With Bintray you know how your library is being consumed. Not only do you get download stats per version, but users are also able to communicate with you; comment and rate your libraries; or otherwise give you feedback.

Setup

Let’s use Yeoman to scaffload a Node.js module which later on will be distributed to Bintray:

mkdir mylib

Install Yeoman globally:

npm install -g yo

Install the nodejs generator globally:

npm install -g generator-nodejs

Download the grunt-bintray-plugin and save it as a development dependency into our package.json:

npm install grunt-bintray-deploy --save-dev

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:

grunt.loadNpmTasks('grunt-bintray-deploy');

Now let’s configure the task to publish our index.js and package.json files to Bintray!

grunt.initConfig({
  bintrayDeploy: {
    bintray: {
      options: {
        user: "bintray_user",
        apikey: "bintray_api_key",
        pkg: {
          repo: "repo",
        }
      },
      files: [{
        expand: true,
        flatten: true,
        src: ["index.js", "package.json"],
        dest: "<%= pkg.version %>",
        filter: "isFile"
      }]
    }
}})

Now we are ready to run our grunt task:

grunt bintrayDeploy

Running "bintrayDeploy:bintray" (bintrayDeploy) task
>> Successfully created new package 'mylib'.
>> Deploying files to 'https://bintray.com/shayy/repo/mylib/0.0.1/files'
>> Successfully deployed 'index.js'
>> Successfully deployed 'package.json'

Done, without errors.

That’s it, here is how it looks like under your Bintray account:
Publish to Bintray

Look, this is the URL your users will use to consume your library from a fast CDN:
Download from Bintray

Now that everything is automated, we can finally go taking a nap and leave our CI server to do this nasty job.

Piece out.

4 thoughts on “Share Your JavaScript Libraries With The World

  1. On top of that, the plugin could provide a support of replacing certain tokens or placeholders in your sources with the script URL. This way every time a script is pushed to Bintray your sources are automatically updated so you don’t even need to copy past this URL.

    • Thanks for the feedback, not sure if this behavior is this plugin specific job, but anyway I wanted to use grunt’s files array and not introduce something new, I’d appreciate if you could elaborate on your specific use case here or in GitHub (How would you want it to look like?)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s