Skip to content

Instantly share code, notes, and snippets.

@stoikerty
Last active May 31, 2020 14:02
Show Gist options
  • Star 9 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save stoikerty/cfa49330a9609f6f8d2d to your computer and use it in GitHub Desktop.
Save stoikerty/cfa49330a9609f6f8d2d to your computer and use it in GitHub Desktop.
Gulp + Browserify - multi-file recipe (JSX, coffeescript, uglify & sourcemaps)
// Config that can be loaded externally, similar
// to [gulp-starter](https://github.com/greypants/gulp-starter)
var src = './app/assets';
var dest = './public';
var config = {
javascript: {
src: src + '/javascript_app/**/*.{js,coffee}',
rootFiles: [
{
src : src + '/javascript_app/app.js',
dest : 'app.js'
},
{
src : src + '/javascript_app/test.coffee',
dest : 'coffee.js'
}
],
dest: dest + '/js'
}
};
// Gulp + Browserify recipe
// ------------------------
// Includes react JSX, coffeescript, uglify & sourcemaps
// Supports multiple input & output files
var gulp = require('gulp');
var sourcemaps = require('gulp-sourcemaps');
var browserify = require('browserify');
var coffeeify = require('coffeeify');
var reactify = require('reactify');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var uglify = require('gulp-uglify');
gulp.task('javascript', function (callback) {
var files = config.javascript.rootFiles;
files.forEach(function (file) {
var b = browserify({
entries: file.src, // Only need initial file, browserify finds the deps
debug: true // Enable sourcemaps
});
b.transform(coffeeify); // Convert Coffeescript
b.transform(reactify); // Convert JSX
b.bundle()
.pipe(source(file.dest))
.pipe(buffer())
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(uglify())
.pipe(sourcemaps.write())
.pipe(gulp.dest(config.javascript.dest));
});
callback();
});
@anthonyhastings
Copy link

Thank you for this. I too have to use vinyl-source-stream so that transforms will work correctly without erroring. This is great to see how it works with gulp-sourcemaps. I have a variation that is a bit messer and uses gulp-filter along with gulp-extract-sourcemaps but i'm now swapping out to yours!

@ggyorfi
Copy link

ggyorfi commented May 4, 2015

doesn't work with watch, watch quits at the first compilation error

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