Skip to content

Instantly share code, notes, and snippets.

@lukin0110
Last active October 26, 2020 00:36
Show Gist options
  • Save lukin0110/47d75c7defad0bf413ab to your computer and use it in GitHub Desktop.
Save lukin0110/47d75c7defad0bf413ab to your computer and use it in GitHub Desktop.
Gulp + browserify + babelify + react
var argv = require('yargs').argv;
var gulpif = require('gulp-if');
var gulp = require('gulp');
var browserify = require('browserify'); //
var babelify = require('babelify');
var source = require('vinyl-source-stream');
var uglify = require('gulp-uglify');
var buffer = require('vinyl-buffer');
/**
* Build an output file. Babelify is used to transform 'jsx' code to JavaScript code.
**/
gulp.task("build-react", function(){
var options = {
entries: "./scripts/main.js", // Entry point
extensions: [".js"], // consider files with these extensions as modules
debug: argv.production ? false : true, // add resource map at the end of the file or not
paths: ["./scripts/"] // This allows relative imports in require, with './scripts/' as root
};
return browserify(options)
.transform(babelify)
.bundle()
.pipe(source("main.min.js"))
.pipe(gulpif(argv.production, buffer())) // Stream files
.pipe(gulpif(argv.production, uglify()))
.pipe(gulp.dest("./build"));
});

Use React with Gulp, Browserify and Babelify. This allows you to use React in jsx & node.js style. It let's you use require('module') in your JavaScript. Babelify will transform the jsx code to JavaScript code.

Development

gulp build-react

This will generate a main.min.js file in the build directory with sourcemaps.

Production

gulp build-react --production

This will exclude the sourcemaps and will minify your output file.

More info

{
"dependencies": {
"react": "^0.14.0",
"react-dom": "^0.14.0"
},
"devDependencies": {
"gulp": "^3.8.5",
"babelify": "^6.4.0",
"browserify": "^12.0.0",
"gulp-if": "^1.2.5",
"gulp-uglify": "^1.4.2",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0",
"yargs": "^3.29.0"
},
"engines": {
"node": ">=0.12.0"
},
"private": true,
"scripts": {}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment