Add browserify recipe

docs/recipes/README.md

@@ -17,3 +17,4 @@
 * [Split tasks across multiple files](split-tasks-across-multiple-files.md)
 * [Using external config file](using-external-config-file.md)
 * [Using multiple sources in one task](using-multiple-sources-in-one-task.md)
+* [Browserify + Uglify with sourcemaps](browserify-uglify-sourcemaps.md)

docs/recipes/browserify-uglify-sourcemap.md

@@ -0,0 +1,44 @@
+# Browserify + Uglify2 with sourcemaps
+
+[Browserify](http://github.com/substack/node-browserify) has become an important and indispensable
+tool but requires being wrapped before working well with gulp. Below is a simple recipe for using
+Browserify with transforms and full sourcemaps that resolve to the original individual files.
+
+``` javascript
+'use strict';
+
+var browserify = require('browserify');
+var gulp = require('gulp');
+var source = require('vinyl-source-stream');
+var buffer = require('vinyl-buffer');
+var uglify = require('gulp-uglify');
+var sourcemaps = require('gulp-sourcemaps');
+
+var getBundleName = function () {
+  var version = require('./package.json').version;
+  var name = require('./package.json').name;
+  return version + '.' + name + '.' + 'min';
+};
+
+gulp.task('javascript', function() {
+
+  var bundler = browserify({
+    entries: ['./app.js'],
+    debug: true
+  });
+
+  var bundle = function() {
+    return bundler
+      .bundle()
+      .pipe(source(getBundleName() + '.js'))
+      .pipe(buffer())
+      .pipe(sourcemaps.init({loadMaps: true}))
+        // Add transformation tasks to the pipeline here.
+        .pipe(uglify())
+      .pipe(sourcemaps.write('./'))
+      .pipe(gulp.dest('./dist/js/'));
+  };
+
+  return bundle();
+});
+```