Becavalier/app.js

## app.js
var ko = require('knockout');

ko.components.register('simple-name', require('./components/simple-name/simple-name.js'));

ko.applyBindings({ userName: ko.observable() });

## gulpfile.js
var gulp = require('gulp'),
    browserify = require('browserify'),
    stringify = require('stringify'),
    source = require('vinyl-source-stream');

gulp.task('browserify', function() {
  var bundleMethod = browserify;//global.isWatching ? watchify : browserify;

  var bundler = bundleMethod({
    // Specify the entry point of your app
    entries: ['./src/app.js']
  });

  var bundle = function() {
    return bundler
      .transform(stringify(['.html']))
      // Enable source maps!
      .bundle({debug: true})
      // Use vinyl-source-stream to make the
      // stream gulp compatible. Specifiy the
      // desired output filename here.
      .pipe(source('app.js'))
      // Specify the output destination
      .pipe(gulp.dest('./build/'));
  };

  return bundle();
});

gulp.task('default', ['browserify']);

## index.html
<!DOCTYPE html>
<html>
  <head></head>
  <body>

    <input data-bind="value: userName"/>

    <!-- using our custom element -->
    <simple-name params="name: userName"></simple-name>

    <script src="knockout.js"></script>
    <script src="app.js"></script>
  </body>
</html>

## package.json
{
  "name": "Project Name",
  "version": "0.0.0",
  "browserify": {
    "transform": [
      "browserify-global-shim"
    ]
  },
  "browserify-global-shim": {
    "jQuery": "$",
    "knockout": "ko"
  },
  "devDependencies": {
    "gulp": "~3.6.2",
    "browserify": "^4.2.1",
    "vinyl-source-stream": "^0.1.1",
    "stringify": "^2.2.0",
    "browserify-global-shim": "^1.0.0"
  }
}

## simple-name.html
<p data-bind='text: name'></p>
<button data-bind='click: something'>Click me</button>

## simple-name.js
var ko = require('knockout'),
  template = require('./simple-name.html');

function viewModel(data) {
  this.name = data.name;
}

viewModel.prototype.something = function() {
  console.log('You invoked something() on the viewmodel.');
};

module.exports = {
  viewModel: viewModel,
  template: template
};
	var ko = require('knockout');

	ko.components.register('simple-name', require('./components/simple-name/simple-name.js'));

	ko.applyBindings({ userName: ko.observable() });
	var gulp = require('gulp'),
	browserify = require('browserify'),
	stringify = require('stringify'),
	source = require('vinyl-source-stream');

	gulp.task('browserify', function() {
	var bundleMethod = browserify;//global.isWatching ? watchify : browserify;

	var bundler = bundleMethod({
	// Specify the entry point of your app
	entries: ['./src/app.js']
	});

	var bundle = function() {
	return bundler
	.transform(stringify(['.html']))
	// Enable source maps!
	.bundle({debug: true})
	// Use vinyl-source-stream to make the
	// stream gulp compatible. Specifiy the
	// desired output filename here.
	.pipe(source('app.js'))
	// Specify the output destination
	.pipe(gulp.dest('./build/'));
	};

	return bundle();
	});

	gulp.task('default', ['browserify']);
	<!DOCTYPE html>
	<html>
	<head></head>
	<body>

	<input data-bind="value: userName"/>

	<!-- using our custom element -->
	<simple-name params="name: userName"></simple-name>

	<script src="knockout.js"></script>
	<script src="app.js"></script>
	</body>
	</html>
	{
	"name": "Project Name",
	"version": "0.0.0",
	"browserify": {
	"transform": [
	"browserify-global-shim"
	]
	},
	"browserify-global-shim": {
	"jQuery": "$",
	"knockout": "ko"
	},
	"devDependencies": {
	"gulp": "~3.6.2",
	"browserify": "^4.2.1",
	"vinyl-source-stream": "^0.1.1",
	"stringify": "^2.2.0",
	"browserify-global-shim": "^1.0.0"
	}
	}
	<p data-bind='text: name'></p>
	<button data-bind='click: something'>Click me</button>
	var ko = require('knockout'),
	template = require('./simple-name.html');

	function viewModel(data) {
	this.name = data.name;
	}

	viewModel.prototype.something = function() {
	console.log('You invoked something() on the viewmodel.');
	};

	module.exports = {
	viewModel: viewModel,
	template: template
	};