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 flyYou 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:
flyYou can use nice ES6 imports, browserify takes care of all the details. It also supports Coffescript flyfiles and more.
Read more here
Written by Maximilian Klein
Related protips
1 Response
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, andwatchhave been extracted to plugins - Task function definitions have changed
$ npm install --save-dev taskr fly-watch fly-clear fly-concat fly-browserify babelifyNote: Because
taskrandflyare 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
Have a fresh tip? Share with Coderwall community!
JavaScript on a page runs with the privileges of that origin. One altered library, tag manager, or snippet can read inputs, change what people see, and call your APIs as the user.
Security insights from Cside