Skip to content

Instantly share code, notes, and snippets.

@tjbenton
Created September 1, 2015 01:14
Show Gist options
  • Save tjbenton/d159edc8ce50adcf3072 to your computer and use it in GitHub Desktop.
Save tjbenton/d159edc8ce50adcf3072 to your computer and use it in GitHub Desktop.
FlyJS is easy to setup

I've used gulp for awhile now and It's also pretty easy. With fly you don't have to repeat your self several times like you do with gulp tasks. You just define out what you want and that's it. If it's a fly plugin it will be required automatically without the need for an additional plugin. You can also run multiple subtasks in the same task in order without having to create a separate task.

This could be the only thing in your flyfile.js and it would run perfectly. This will clear the previous JS, convert all the ES6 files to ES5 with babel, combine all the files, minify the combined file and output the file and the sourcemaps to the dist js directory.

3 total plugins require including fly it's self , 0 plugins that had to be required in the flyfile.js, 1 task

// flyfile.js
export function *js(){
 yield this.clear("dist/lib/js");
 yield this.source("app/lib/js/**/*.js")
        .babel({ // fly-babel
         stage: 0,
         sourceMap: true
        })
        .concat("bundle.min.js")
        .uglify() // fly-uglify
        .target("dist/lib/js");
}

Here's what the gulp version looks like to do exactly the same thing 6 total plugins required(including gulp), and 6 plugins you have to require in the gulpfile, and 2 separate tasks to complete the same thing

// gulpfile.js
var gulp = require("gulp"),
    del = require("del"),
    sourcemaps = require("gulp-sourcemaps"),
    babel = require("gulp-babel"),
    concat = require("gulp-concat"),
    uglify = require("gulp-uglify");

gulp.task("js", ["js:clean"], function(){
 return gulp.src("dist/lib/js/**/*.js")
         .pipe(sourcemaps.init())
         .pipe(babel())
         .pipe(concat("bundle.min.js"))
         .pipe(uglify())
         .pipe(sourcemaps.write("."))
         .pipe(gulp.dest("dist/lib/js"))
});

gulp.task("js:clean", function(cb){
 del(["dist/lib/js"], cb);
});

Over all I think it's a lot easier to setup tasks and it's easier to see what the tasks are doing. Plus it's using es6 and es7 features which makes it read more like standard code rather than lib specific code

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment