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:

[code language=”bash”]mkdir mylib[/code]

Install Yeoman globally:

[code language=”bash”]npm install -g yo[/code]

Install the nodejs generator globally:

[code language=”bash”]npm install -g generator-nodejs[/code]

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

[code language=”bash”]npm install grunt-bintray-deploy –save-dev[/code]

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

[code language=”javascript”]
grunt.loadNpmTasks(‘grunt-bintray-deploy’);
[/code]

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

[code language=”javascript”]
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”
}]
}
}})
[/code]

Now we are ready to run our grunt task:

[code language=”bash”]
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.
[/code]

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.