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