Strange gulp syntax

Question

I am using Gulp v3.9.1, and have run across a gulpfile that is using a syntax that is foreign to me. None of the tasks with this syntax will run.

gulp.task ('serve', [ 'js.lint', 'test' ], () => {
        onError = eatError;

        browserSync.init ({
            ui: false,
            files: [
                'index2.html',
                'tpl/**/*',
                opts.srcDir + '/assets/img/**/*',
                opts.srcDir + '/assets/less/**/*',
                opts.srcDir + '/app/**/*',
                opts.testDir + '/**/*',
                'src/main/coverage/**/*'
            ],
            proxy: {
                target: "localhost:8080",
                proxyOptions: {
                    xfwd: true
                }
            }
        });

        gulp.watch ([ 'gulpfile.js', opts.srcDir + '/app/**/*', opts.testDir + '/**/*' ], [ 'js.lint', 'test' ]);
    });

In particular, I am referring to the () => on the first line. That is what gulp is complaining about. That syntax looks a little similar to a CoffeScript gulpfile I found, but I am not sure what it is. The project using this gulpfile has a ton of packages, which I am sifting through right now to see if they have anything to do with this syntax. I want to know what the () => represents, and how to get tasks using this syntax to run.

es2015 lambda expression. "fat arrow function", you can replace it with an anonymous function (literally, just replace `() => ` with `function() `) or run it through babel first. — rlemon, Mar 09 '16 at 14:33
Possible duplicate of [What's the meaning of "=>" (an arrow formed from equals & greater than) in JavaScript?](http://stackoverflow.com/questions/24900875/whats-the-meaning-of-an-arrow-formed-from-equals-greater-than-in-javas) — James Thorpe, Mar 09 '16 at 14:34
Hmm actually that might not be the best dupe - only talks about what `=>` actually is, not how to get it working in your environment. Vote retracted. — James Thorpe, Mar 09 '16 at 14:37
@JamesThorpe To be fair, I did ask what `() =>` meant... so the dup you pointed to isn't irrelevant since it does answer part of what I wanted to know. — Healforgreen, Mar 09 '16 at 14:42

score 2 · Accepted Answer · edited Mar 09 '16 at 14:38

2

That's the ES2015 syntax for an anonymous function with the outer scope's this as the context.

To get that syntax to work with gulp, make sure the file name is gulpfile.babel.js and not just gulpfile.js. Recent versions of gulp know to look for that file name and transpile it on-the-fly before running it, provided you have Babel installed.

edited Mar 09 '16 at 14:38

T.J. Crowder

1,031,962
187
1,923
1,875

answered Mar 09 '16 at 14:35

max

5,979
2
21
16

how does this do anything? babel isn't going to intrinsicly find his files and convert them – rlemon Mar 09 '16 at 14:36
@rlemon: Because it's built into recent versions of Gulp to support this, provided you have Babel installed. The gulpfile gets transpiled on-the-fly before being run. – T.J. Crowder Mar 09 '16 at 14:36
Gulp implicitly handles babel compilation in Gulpfiles now. – max Mar 09 '16 at 14:37
@T.J.Crowder TIL. should be mentioned in the answer then. I'll retract my -1 – rlemon Mar 09 '16 at 14:37

Strange gulp syntax

1 Answers1