tylersticka · August 29, 2015 13:57
diff --git a/gulpfile.js b/gulpfile.js
 /**
 * This project's actual gulpfile contains much more than this,
 * but these are the relevant bits.
 */

 // Node libraries
 var fs = require('fs');
 var path = require('path');

 // Gulp + plugins
 var gulp = require('gulp');
 var rename = require('gulp-rename');
 var replace = require('gulp-replace');

 // I store some of the paths here just to
 // avoid unnecessary verboseness later on.
 var paths = {
  html: {
    // This path could be used for a 'watch' task later
    src: 'src/**/*.html',
    // Main file to read
    main: 'src/index.html',
    // Template folder
    templates: 'src/ko-templates',
    // Destination directory for compiled index.html
    dest: 'build'
  }
 };

 // task definition here
 gulp.task('html', function(){
  // start from index.html
  gulp.src(paths.html.main)
    // Replace a placeholder comment with the output of a function...
    .pipe(replace('<!-- ko-templates -->', (function(){
      // walk through all template files...
      var templates = [];
      var files = fs.readdirSync(paths.html.templates);
      for (var i in files) {
        // Prepend and append each template's content with the Knockout
        // template tag, including a unique ID based on the filename.
        templates.push(
          '<script type="text/html" id="' + path.basename(files[i], '.html') + '-template">' +
          fs.readFileSync(paths.html.templates + '/' + files[i], 'utf8') +
          '</script>'
        );
      }
      // Return the templates separated by a break
      return templates.join("\n");
    }())))
    // Plop the result to the build/destination path
    .pipe(gulp.dest(paths.html.dest))
 });
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
  <body>
    <p>Some normal content!</p>
    <!-- ko-templates -->
  </body>
 </html>
	/**
	* This project's actual gulpfile contains much more than this,
	* but these are the relevant bits.
	*/

	// Node libraries
	var fs = require('fs');
	var path = require('path');

	// Gulp + plugins
	var gulp = require('gulp');
	var rename = require('gulp-rename');
	var replace = require('gulp-replace');

	// I store some of the paths here just to
	// avoid unnecessary verboseness later on.
	var paths = {
	html: {
	// This path could be used for a 'watch' task later
	src: 'src/*/.html',
	// Main file to read
	main: 'src/index.html',
	// Template folder
	templates: 'src/ko-templates',
	// Destination directory for compiled index.html
	dest: 'build'
	}
	};

	// task definition here
	gulp.task('html', function(){
	// start from index.html
	gulp.src(paths.html.main)
	// Replace a placeholder comment with the output of a function...
	.pipe(replace('<!-- ko-templates -->', (function(){
	// walk through all template files...
	var templates = [];
	var files = fs.readdirSync(paths.html.templates);
	for (var i in files) {
	// Prepend and append each template's content with the Knockout
	// template tag, including a unique ID based on the filename.
	templates.push(
	'<script type="text/html" id="' + path.basename(files[i], '.html') + '-template">' +
	fs.readFileSync(paths.html.templates + '/' + files[i], 'utf8') +
	'</script>'
	);
	}
	// Return the templates separated by a break
	return templates.join("\n");
	}())))
	// Plop the result to the build/destination path
	.pipe(gulp.dest(paths.html.dest))
	});
	<!DOCTYPE html>
	<html>
	<body>
	<p>Some normal content!</p>
	<!-- ko-templates -->
	</body>
	</html>