Frontend Builds 5: Build as a Service (BaaS)

Frontend Builds 5: Build as a Service (BaaS)

See all articles from the series

The Idea

Most developers create frequently new projects, either for work or for just trying something new. This is also true for me. I found myself using yeoman to automatically create new projects almost every day. There are plenty awesome generators available in the wild. Just visit the yeoman website and discover the generator repository, it's awesome.

I've also build several public and internal generators to generate gulpfiles for every new project. But if you rely on (almost) the same stack for many projects it makes no sense to maintain all those gulpfiles for every projects. This makes just no sense!

At that point I started thinking about Build as a Dependency or you may also call it Build as a Service (BaaS).

Technically we will package our existing build into a npm package and publish it on NPM, so we can easily consume the full-fledged build directly from there and don't have to repeat ourself for each and every project.

Implement the BaaS

In order to keep things clean, I've created a new repo which will only host our build scripts. You can find the new repo here.

When discovering the project you may realise that there is no additional code in that repo. It's just the gulpfile and all the contents from the gulptasks directory in addition with it's own package.json. When building this a npm package, it's important to set main within package.json to src/gulpfile.js.

The entire build is publicly available on NPM with the name xplatform-build.

Refactoring x-note

Integrating xplatform-build in x-note is pretty simple.

First, refactor the package.json file to look like shown below

  "name": "x-note",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "author": "Thorsten Hans <[email protected]> (",
  "license": "MIT",
  "devDependencies": {
    "gulp": "^3.9.0",
    "xplatform-build": "^1.0.1"

After doing so, move to the terminal and execute

# clean all installed local modules first  (optional)
$ rm -rf node_modules
$ npm i xplatform-build --D

Modify gulpfile.js and gulptasks in x-note

Delete the entire gulptasks directory. Then open gulpfile.js and replace the entire content with the following line of code


Give it a try

Move to the terminal and try our gulp tasks as shown below.

$ gulp
# which will automatically execute gulp help
$ gulp build
$ gulp build:mobile
$ gulp build:desktop

That's awesome, isn't it? :D

Updated x-note on github

You can find the version of x-note on github within a dedicated BaaS branch over here.

Happy building!


comments powered by Disqus