Last active
May 31, 2020 14:02
-
-
Save stoikerty/cfa49330a9609f6f8d2d to your computer and use it in GitHub Desktop.
Gulp + Browserify - multi-file recipe (JSX, coffeescript, uglify & sourcemaps)
This file contains 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
// 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(); | |
}); |
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
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 withgulp-sourcemaps
. I have a variation that is a bit messer and usesgulp-filter
along withgulp-extract-sourcemaps
but i'm now swapping out to yours!