Skip to content

Instantly share code, notes, and snippets.

@micmania1

micmania1/gulpfile.js

Last active October 27, 2021 01:46
Show Gist options
  • Save micmania1/3a6f91b256b8f3e7dc97a740d60e20cb to your computer and use it in GitHub Desktop.
Save micmania1/3a6f91b256b8f3e7dc97a740d60e20cb to your computer and use it in GitHub Desktop.
Download ZIP
Basic react gulpfile with browserfy and babel
Raw
gulpfile.js
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']);
});
Raw
index.html
<!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>
Raw
install
#!/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
Raw
main.jsx
// ./app/src/main.jsx
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
@kennblvnp
Copy link

can we also see your package.json?

@kennblvnp
Copy link

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

@micmania1
Copy link
Author

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
Copy link

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