Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
React Setup with Babel, Gulp, and Browserify
import gulp from 'gulp';
import browserify from 'browserify';
import source from 'vinyl-source-stream';
import buffer from 'vinyl-buffer';
import eslint from 'gulp-eslint';
import exorcist from 'exorcist';
import browserSync from 'browser-sync';
import watchify from 'watchify';
import babelify from 'babelify';
import uglify from 'gulp-uglify';
import ifElse from 'gulp-if-else';
watchify.args.debug = true;
const sync = browserSync.create();
// Input file.
var bundler = browserify('src/jsx/app.jsx', {
extensions: ['.js', '.jsx'],
debug: true
});
// Babel transform
bundler.transform(babelify.configure({
sourceMapRelative: 'src',
presets: ["es2015", "react"]
}));
// On updates recompile
bundler.on('update', bundle);
function bundle() {
return bundler.bundle()
.on('error', function (err) {
console.log("=====");
console.error(err.toString());
console.log("=====");
this.emit("end");
})
.pipe(exorcist('public/assets/js/bundle.js.map'))
.pipe(source('bundle.js'))
.pipe(buffer())
.pipe(ifElse(process.env.NODE_ENV === 'production', uglify))
//.pipe(uglify())
.pipe(gulp.dest('public/assets/js'))
;
}
gulp.task('default', ['transpile']);
gulp.task('transpile', ['lint'], () => bundle());
gulp.task('lint', () => {
return gulp.src([
'src/**/*.jsx',
'gulpfile.babel.js'
])
.pipe(eslint())
.pipe(eslint.format())
;
});
gulp.task('serve', ['transpile'], () => sync.init({ server: 'public' }));
gulp.task('js-watch', ['transpile'], () => sync.reload());
gulp.task('watch', ['serve'], () => {
gulp.watch(['src/**/*.jsx'], ['js-watch']);
gulp.watch('public/assets/style.css', sync.reload);
gulp.watch('public/index.html', sync.reload);
});
{
"name": "react-app",
"devDependencies": {
"babel-core": "^6.7.7",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-register": "^6.7.2",
"babelify": "^7.3.0",
"browser-sync": "^2.12.5",
"browserify": "^13.0.0",
"eslint": "^2.8.0",
"eslint-plugin-react": "^5.0.1",
"exorcist": "^0.4.0",
"gulp": "^3.9.1",
"gulp-eslint": "^2.0.0",
"gulp-if-else": "^1.0.3",
"gulp-uglify": "^1.5.3",
"react": "^15.0.1",
"react-dom": "^15.0.1",
"react-markdown-to-html": "^1.0.11",
"react-router": "^2.3.0",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0",
"watchify": "^3.7.0"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.