Skip to content

Instantly share code, notes, and snippets.

@nramirez
Created January 10, 2016 08:50
Show Gist options
  • Save nramirez/5927d363291bfaae337a to your computer and use it in GitHub Desktop.
Save nramirez/5927d363291bfaae337a to your computer and use it in GitHub Desktop.
Gulp, Babel, React and Expressjs
{
"presets": ["es2015", "stage-0"]
}
//This will allow you to use ES6 in the gulpfile
'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));
});
"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')
);
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');
});
@daman2408
Copy link

Hey, in gulpfile.js line 72, shouldn't the entry file be '.public/js/home.jsx' instead of test.js?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment