Gulp/Browserify integration

[whatisjasongoldstein]

Hi,

I love the idea, but I'm not sure how to get it to compile jsx for preact.

This is my gulp task:

gulp.task('scripts', function() {
    var b = browserify({
            "entries": ['app/js/app.js'],
            transform: [babelify]
        });

    return b.bundle()
        .pipe(source('app.min.js'))
        .pipe(buffer())
        .pipe(sourcemaps.init({loadMaps: true}))
            .on('error', gutil.log)
        .pipe(sourcemaps.write('../maps/js'))
        .pipe(gulp.dest('dist/js'))
        .pipe(notify("Built JS!"));
});

If I added reactify to the transforms, it compiled, but transformed my code into React.createElement.

I'm obviously way off course. What's the right way to do this?

[developit]

Reactify doesn't seem to provide an option to set the JSX pragma. I would recommend using babelify to do your JSX transformation instead, since that's the officially supported method both for react and preact. For Babel 6, you need to install babel-preset-react, and then tell the JSX plugin to use h for JSX.

Example .babelrc:

{
  "presets": ["react"],
  "plugins": [
    ["transform-react-jsx",{"pragma":"h"}]
  ]
}

Let me know if that makes sense!

[whatisjasongoldstein]

Yes, that worked. Thanks!

[developit]

Awesome :)

[foreshadow]

Hi, i am new to preact. After reading comments above, i still cannot figure out how to compile jsx for preact. I used to use

gulp.src('*.jsx')
    .pipe(react())
    .pipe(gulp.dest('dist/js'))

to compile it. So what should I replace react() with?

[bestwestern]

@whatisjasongoldstein could you please post what you did to make it work?

[whatisjasongoldstein]

I would but unfortunately I'm not even sure which project I was working in when I asked the question. From the comments, I think the .babelrc file, which configures babel in the directory, was the only thing I was missing.