Created
January 10, 2016 08:50
-
-
Save nramirez/5927d363291bfaae337a to your computer and use it in GitHub Desktop.
Gulp, Babel, React and Expressjs
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
{ | |
"presets": ["es2015", "stage-0"] | |
} | |
//This will allow you to use ES6 in the gulpfile |
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', | |
dest: './app', | |
bundle: 'bundle.js', | |
bundleDest: './app/public/js', | |
} | |
//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 | |
//With react support | |
gulp.task('client', cb => { | |
return browserify({entries: './public/js/test.jsx', 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'; | |
class Test extends React.Component { | |
render() { | |
return ( | |
<h1> | |
y eres un <strong>PALOMO!</strong> | |
</h1> | |
); | |
} | |
} | |
ReactDOM.render( | |
<Test/>, | |
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
import express from 'express'; | |
import bodyParser from 'body-parser'; | |
import morgan from 'morgan'; | |
import exphbs from 'express-handlebars'; | |
const app = express(); | |
app.engine('handlebars', exphbs({defaultLayout: 'main'})); | |
app.set('view engine', 'handlebars'); | |
app.use('/', express.static(__dirname + '/public')); | |
app.use(morgan('dev')); | |
app.use(bodyParser.json()); | |
app.use(bodyParser.urlencoded({extended: true})); | |
app.listen(8000, () => { | |
console.log('Server is listening'); | |
}); | |
//routes | |
app.get('/', function (req, res) { | |
res.render('home'); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hey, in gulpfile.js line 72, shouldn't the entry file be '.public/js/home.jsx' instead of test.js?