Last active
August 17, 2016 12:34
-
-
Save nramirez/5611abb6f1dd15ab0432 to your computer and use it in GitHub Desktop.
ES6, Gulp, Browserify and React
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
'use strict'; | |
import source from 'vinyl-source-stream'; | |
import gulp from 'gulp'; | |
import browserify from 'browserify'; | |
import babelify from 'babelify'; | |
import run from 'run-sequence'; | |
import rimraf from 'rimraf'; | |
import shell from 'gulp-shell'; | |
import server from 'gulp-live-server'; | |
import babel from 'gulp-babel' | |
const paths = { | |
src: './src', | |
publicSrc: './public/js', | |
dest: './app', | |
bundle: 'bundle.js', | |
bundleDest: './app/public/js', | |
publicEntries: [ | |
'./public/js/index', | |
'./public/js/components/test', | |
] | |
}; | |
//Catch the server instance | |
let express; | |
gulp.task('default', cb => { | |
run('server', 'build', 'watch', cb); | |
}); | |
gulp.task('build', cb =>{ | |
run('clean', 'babel', 'client', 'restart', cb); | |
}); | |
//build when a file has changed | |
gulp.task('watch', cb => { | |
gulp.watch([ | |
`${paths.src}/**.js`, | |
`${paths.publicSrc}/**.jsx` | |
], ['build']); | |
}); | |
/* | |
Server | |
*/ | |
gulp.task('server', () => { | |
express = server.new(paths.dest); | |
}); | |
gulp.task('restart', () =>{ | |
express.start.bind(express)(); | |
}); | |
//Clean the app destination, to prepare for new files | |
gulp.task('clean', cb => { | |
rimraf(paths.dest, cb); | |
}); | |
//Transform back-end ES6 to ES5 | |
//only transform features not supported by node v5 | |
gulp.task('babel', cb => { | |
return gulp.src(`${paths.src}/**/*.js`) | |
.pipe(babel({ | |
presets: ['es2015-node5', 'stage-0'] | |
})) | |
.pipe(gulp.dest(paths.dest)); | |
}); | |
/* | |
Client | |
*/ | |
//Transform client ES6 to ES5 | |
gulp.task('client', cb => { | |
return browserify({entries: paths.publicEntries, extensions: ['.jsx'], debug: true}) | |
.transform('babelify', {presets: ['es2015', 'react']}) | |
.bundle() | |
.pipe(source(paths.bundle)) | |
.pipe(gulp.dest(paths.bundleDest)); | |
}); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
'use strict'; | |
import React from 'react'; | |
import ReactDOM from 'react-dom'; | |
import TestPage from './components/test'; | |
(() => { | |
ReactDOM.render( | |
<TestPage/>, | |
document.getElementById('mainContainer') | |
); | |
})(); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
'use strict'; | |
import React from 'react'; | |
class TestPage extends React.Component { | |
render() | |
{ | |
return <h1> Hello World! </h1> | |
} | |
} | |
export default TestPage; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment