am_euw
Last Updated: June 10, 2017
·
500
· LittleHelicase

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.

Read more here

1 Response
Add your response

29019

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 ·