Last Updated: June 10, 2017

Building Javascript with Fly

I just discovered Fly. A new build system that takes advantage of some new Javascript ES2015 features. Unlike Webpack, Grunt or Gulp it looks really slim. Simply install it via

npm install --save-dev fly fly-browserify babelify
npm install -g fly

You need the global install for the CLI. It compiles your ES2015 project in no time with this flyfile.babel.js

const paths = {
    dist: 'dist',
    scripts: ['src/index.js']
}

export function* build() {
    yield this.clear(paths.dist)
    yield this
        .source(paths.scripts)
        .browse({ transform: [require('babelify')] })
        .concat("your-lib.js")
        .target(paths.dist)
}

The export is part of ES2015 and fly will register the function build as a new task with the same name (fly build). It also uses generator functions to avoid the callback hell for asynchronous calls.

To improve our little example we add a file system watch to it, simply by adding:

export default function*() {
    yield this.watch(paths.scripts, "build")
}

This exports the default task for fly that will run on the command line via:

fly

You can use nice ES6 imports, browserify takes care of all the details. It also supports Coffescript flyfiles and more.

Written by Maximilian Klein

Say Thanks

Respond

Related protips

Don't use Array.forEach, use for() instead

1.234M

How to check if JavaScript Object is empty

1.099M

JavaScript iterate through object keys and values

590.4K

1 Response

Add your response

lukeed

Hi there, thanks for the write-up, and I'm sorry I never saw this before!

Unfortunately, there was a dispute between myself & the co-owner, which resulted in my forced removal. I authored all releases between 1.0 and 2.0, inclusive. You may find my continuation of the project as Taskr, found here: https://github.com/lukeed/taskr

As for your article, as of fly@2.0 and taskr@1.0, there have been a few major changes:

I no longer recommend a global installation, although it will still work
The core codebase is much lighter, so clear, concat, and watch have been extracted to plugins
Task function definitions have changed

$ npm install --save-dev taskr fly-watch fly-clear fly-concat fly-browserify babelify

Note: Because taskr and fly are the same (I wrote it), the plugins are interchangeable.

export async function clean(task) {
  await task.clear(paths.dist);
}

export async function build(task, opts) {
  await task.start('clean');
  await task.source(opts.src || paths.scripts) // 'watch' sends changed files as opts.src
        .browserify({ transform:[require('babelify')] })
        .concat('your-lib.js')
        .target(paths.dist)
}

export default async function (task) {
    yield task.watch(paths.scripts, 'build');
}

The above example is using async/await thanks to the fly-esnext package, which I did not include in the preliminary installation list.

Thanks for the write-up!
Luke

over 1 year ago ·