Skip to content

Instantly share code, notes, and snippets.

@luk3thomas
Last active August 29, 2015 14:11
Show Gist options
  • Save luk3thomas/123ebf30eb4ae5cbef37 to your computer and use it in GitHub Desktop.
Save luk3thomas/123ebf30eb4ae5cbef37 to your computer and use it in GitHub Desktop.
working example of gulp, coffeescript, react, jsx, browserify
sys = require "sys"
exec = require("child_process").exec
spawn = require("child_process").spawn
browserify = require "browserify"
watchify = require "watchify"
coffee_react = require "coffee-reactify"
gulp = require "gulp"
jade = require "gulp-jade"
plumber = require "gulp-plumber"
reload = require "gulp-livereload"
source = require "vinyl-source-stream"
sass = require "gulp-sass"
concat = require "gulp-concat"
cssmin = require "gulp-minify-css"
autoprefixer = require "gulp-autoprefixer"
PROD = process.env.ENV is 'PROD'
files =
html:
src: "src/client/**/*.jade"
dest: "public/"
javascripts:
src: "./src/client/app/app.coffee"
watch: "src/client/**/*.coffee"
name: "app.js"
dest: "public/javascripts/"
stylesheets:
src: [
"src/client/stylesheets/_variables.scss"
"src/client/stylesheets/_mixins.scss"
"src/client/stylesheets/vendor/*"
"src/client/stylesheets/**/*.*"
]
name: "app.css"
dest: "public/stylesheets/"
# Browserify. We create the browserify instance outside the normal gulp tasks.
# We'll use gulp.watch to watch for any changes for files inside the
# app folder and trigger a rebundle.
args =
extensions: [".coffee", ".js"]
args[k] = v for k,v of watchify.args
b = browserify args
b.add files.javascripts.src
b.transform coffee_react
bundler = b
bundle = (ids)->
bundler.bundle()
.on "error", (error) -> console.log error
.pipe source(files.javascripts.name)
.pipe gulp.dest(files.javascripts.dest)
gulp.task "javascripts", -> bundle
gulp.task "stylesheets", ->
css = gulp.src files.stylesheets.src
.pipe plumber()
.pipe concat(files.stylesheets.name)
.pipe sass()
.pipe autoprefixer
browsers: ["ios >= 5", "android >= 2"],
cascade: true
if PROD
css = css.pipe cssmin()
css.pipe gulp.dest(files.stylesheets.dest)
gulp.task "html", ->
gulp.src files.html.src
.pipe plumber()
.pipe jade
pretty: not PROD
.pipe gulp.dest(files.html.dest)
gulp.task "watch", ->
reload.listen()
gulp.watch files.stylesheets.src, ["stylesheets"]
gulp.watch files.html.src, ["html"]
gulp.watch("public/**/*").on "change", reload.changed
gulp.task "auto-reload", ->
server = null
frontend = null
# run watchify
bundler = watchify b
bundler.on "update", bundle
bundle()
reload_server = ->
server.kill() if server?
server = spawn "./node_modules/coffee-script/bin/coffee", ["./src/server/app.coffee"], stdio: "inherit"
reload_frontend = ->
frontend.kill() if frontend?
frontend = spawn "./node_modules/gulp/bin/gulp.js", ["watch", "--require coffee-script"], stdio: "inherit"
gulp.watch "gulpfile.coffee", reload_frontend
gulp.watch "./src/server/**/*", reload_server
reload_server()
reload_frontend()
gulp.task "test", ->
gulp.watch files.javascripts.watch, ->
exec "npm test", (err, stdout) ->
sys.puts stdout
gulp.task "build", ["javascripts", "stylesheets", "html"]
gulp.task "default", ["build", "auto-reload"]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment