Skip to content

Instantly share code, notes, and snippets.

@shrunyan

shrunyan/app.js

Last active January 7, 2017 14:40
Show Gist options
  • Star 10 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save shrunyan/62efd4f34a396d65c85f to your computer and use it in GitHub Desktop.
Save shrunyan/62efd4f34a396d65c85f to your computer and use it in GitHub Desktop.
Download ZIP
Example Gulp build for Riotjs + ES6 + Browserify + Babelify + Riotify
Raw
app.js
import './app.tag'
riot.mount('#app', 'app')
Raw
app.tag
require('./dashboard.tag')
<app>
<section id="main">
<h1>Total EcoSystem Pageviews</h1>
<dashboard></dashboard>
</section>
</app>
Raw
dashboard.tag
require('./dashboard-graph.tag')
<dashboard>
<dashboard-graph ecosystem={ecosystem}></dashboard-graph>
<script type="es6">
import moment from 'moment'
this.ecosystem = 1
this.on('mount', () => {
Z.dispatcher.on('set:ecosystem', (ecosystem) => {
this.update({ecosystem})
})
})
</script>
</dashboard>
Raw
gulpfile.js
var gulp = require('gulp')
var browserify = require('browserify')
var watchify = require('watchify')
var riotify = require('riotify')
var babelify = require('babelify')
var source = require('vinyl-source-stream')
gulp.task('bundle:app', function () {
var b = browserify(watchify.args)
b.external(VENDORS)
b.add(APP_ENTRY)
b.transform(babelify)
b.transform(riotify)
b.bundle()
.pipe(source('bundle.js'))
.pipe(buffer())
.pipe(gulp.dest(BUILD))
return b
})
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>EcoSystem Dashboard</title>
<link rel="stylesheet" href="main.css" media="screen" />
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="bundle.js"></script>
</body>
</html>
@shrunyan
Copy link
Author

  • Gulp orchestrates the build.
  • Browserify handles the bundling
  • Babelify transpiles ES6 modules while bundling
  • Riotify makes the compiled riot tags able to be bundled

The type="es6 attribute on the script tag causes riot to use babel when compiling the .tag file.

@maadborn
Copy link

buffer() is probably var buffer = require('vinyl-buffer');

@restlessmedia
Copy link

+1 maadborn

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