Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Basic react gulpfile with browserfy and babel
var gulp = require('gulp');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var watch = require('gulp-watch');
var gutil = require('gulp-util');
var browserify = require('browserify');
var babel = require('gulp-babel');
gulp.task('transform', function() {
return gulp.src('./app/src/**/*.jsx')
.pipe(babel({
presets: ["react", "es2015"]
}))
.pipe(gulp.dest('./app/dist'));
})
gulp.task('js', ['transform'], function() {
// Assumes a file has been transformed from
// ./app/src/main.jsx to ./app/dist/main.js
return browserify('./app/dist/main.js')
.bundle()
.on('error', gutil.log)
.pipe(source('main.js'))
.pipe(buffer())
.pipe(gulp.dest('./'))
});
gulp.task('default', ['js'], function() {
gulp.watch('./app/**/*.jsx', ['js']);
});
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
</head>
<body>
<div id="example"></div>
<script src="/main.js"></script>
</body>
</html>
#!/bin/bash
npm install --save-dev babel-preset-es2015 browserify gulp gulp-babel gulp-notify gulp-util gulp-watch react react-dom vinyl-buffer vinyl-source-stream babel-preset-react
// ./app/src/main.jsx
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
@sjingo

This comment has been minimized.

Copy link

@sjingo sjingo commented Apr 19, 2018

Thanks for this build, really helpful for my product listing page I'm building. I'm forked a gist with updated to the gulpfile so you can switch dev / production environment.

@kennblvnp

This comment has been minimized.

Copy link

@kennblvnp kennblvnp commented Sep 14, 2019

can we also see your package.json?

@kennblvnp

This comment has been minimized.

Copy link

@kennblvnp kennblvnp commented Sep 14, 2019

what was the version of the react and gulp for this?

@micmania1

This comment has been minimized.

Copy link
Owner Author

@micmania1 micmania1 commented Sep 16, 2019

This was for an old side project. I don't remember what for, but you should be able to generate the package.json using the install npm command.

If you're looking to start a react project now you'll be better off using create-react-app which has way better tooling and support. https://github.com/facebook/create-react-app

@kennblvnp

This comment has been minimized.

Copy link

@kennblvnp kennblvnp commented Sep 16, 2019

because if I install using this

npm install --save-dev babel-preset-es2015 browserify gulp gulp-babel gulp-notify gulp-util gulp-watch react react-dom vinyl-buffer vinyl-source-stream babel-preset-react

It will install the latest versions of it. actualy i tried this, some errors popping out. is it because of the versions?

Thanks for replying :)

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