zakmac/ember-cli-build.js

## ember-cli-build.js
/* global require, module */
var EmberApp     = require('ember-cli/lib/broccoli/ember-app');
var environment  = require('./config/environment');
var Funnel       = require('broccoli-funnel');
var Less         = require('broccoli-less-single');
var mergeTrees   = require('broccoli-merge-trees');
var replace      = require('broccoli-string-replace');

module.exports = function(defaults) {

  var allStyles,
      app,
      appStyles,
      appTree,
      bootstrapStyles,
      bowerDir,
      ENV,
      hljsJS,
      hljsStyles;

  allStyles = new Funnel('app/styles');
  // @todo: fingerprint is disabled until it can be applied to compiled `.less`
  // files and their media references
  app = new EmberApp(defaults, {
    fingerprint: {
      enabled: false
    }
  });
  bowerDir = app.bowerDirectory;
  ENV = {
    baseURL: environment(app.env).baseURL || '/',
    modulePrefix: environment(app.env).modulePrefix || 'app'
  };

  // create the app tree and remove `**/*.less` – manually compiled/added further down
  appTree = new Funnel(app.toTree(), {
    exclude: ['**/*.less']
  });

  // find/replace in all styles
  allStyles = replace(allStyles, {
    files: ['**/*.less'],
    patterns: [{
      match: /\/ENV_BASE_URL\//g,
      replacement: ENV.baseURL
    }]
  });

  // compile the application styles
  appStyles = new Less(
    [allStyles],
    'app.less',
    'assets/'+ ENV.modulePrefix +'.css'
  );

  // compile the bootstrap styles
  bootstrapStyles = new Less(
    [allStyles],
    'vendor-bootstrap.less',
    'vendor/bootstrap.css'
  );

  // compile the highlightjs styles
  hljsStyles = new Less(
    [allStyles],
    'vendor-highlightjs.less',
    'vendor/highlightjs.css'
  );

  // rename the highlightjs script
  hljsJS = new Funnel(bowerDir +'/highlightjs', {
    destDir: 'vendor',
    files: ['highlight.pack.js'],
    getDestinationPath: function(relativePath) {
      return 'highlightjs.js';
    }
  });

  // put it all together and what do you got?
  return mergeTrees([appTree, appStyles, bootstrapStyles, hljsJS, hljsStyles]);
};

## index.html.diff
diff --git a/app/index.html b/app/index.html
--- a/app/index.html
+++ b/app/index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Ember.js Demos – Zak MacDonald</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    {{content-for 'head'}}

+   <link rel="stylesheet" href="vendor/bootstrap.css">
+   <link rel="stylesheet" href="vendor/highlightjs.css">
    <link rel="stylesheet" href="assets/vendor.css">
    <link rel="stylesheet" href="assets/emberjs-demos.css">

    {{content-for 'head-footer'}}
  </head>
  <body>
    {{content-for 'body'}}

+   <script src="vendor/highlightjs.js"></script>
    <script src="assets/vendor.js"></script>
    <script src="assets/emberjs-demos.js"></script>

    {{content-for 'body-footer'}}

  </body>
</html>
	/* global require, module */
	var EmberApp = require('ember-cli/lib/broccoli/ember-app');
	var environment = require('./config/environment');
	var Funnel = require('broccoli-funnel');
	var Less = require('broccoli-less-single');
	var mergeTrees = require('broccoli-merge-trees');
	var replace = require('broccoli-string-replace');

	module.exports = function(defaults) {

	var allStyles,
	app,
	appStyles,
	appTree,
	bootstrapStyles,
	bowerDir,
	ENV,
	hljsJS,
	hljsStyles;

	allStyles = new Funnel('app/styles');
	// @todo: fingerprint is disabled until it can be applied to compiled `.less`
	// files and their media references
	app = new EmberApp(defaults, {
	fingerprint: {
	enabled: false
	}
	});
	bowerDir = app.bowerDirectory;
	ENV = {
	baseURL: environment(app.env).baseURL \|\| '/',
	modulePrefix: environment(app.env).modulePrefix \|\| 'app'
	};

	// create the app tree and remove `*/.less` – manually compiled/added further down
	appTree = new Funnel(app.toTree(), {
	exclude: ['*/.less']
	});

	// find/replace in all styles
	allStyles = replace(allStyles, {
	files: ['*/.less'],
	patterns: [{
	match: /\/ENV_BASE_URL\//g,
	replacement: ENV.baseURL
	}]
	});

	// compile the application styles
	appStyles = new Less(
	[allStyles],
	'app.less',
	'assets/'+ ENV.modulePrefix +'.css'
	);

	// compile the bootstrap styles
	bootstrapStyles = new Less(
	[allStyles],
	'vendor-bootstrap.less',
	'vendor/bootstrap.css'
	);

	// compile the highlightjs styles
	hljsStyles = new Less(
	[allStyles],
	'vendor-highlightjs.less',
	'vendor/highlightjs.css'
	);

	// rename the highlightjs script
	hljsJS = new Funnel(bowerDir +'/highlightjs', {
	destDir: 'vendor',
	files: ['highlight.pack.js'],
	getDestinationPath: function(relativePath) {
	return 'highlightjs.js';
	}
	});

	// put it all together and what do you got?
	return mergeTrees([appTree, appStyles, bootstrapStyles, hljsJS, hljsStyles]);
	};
	diff --git a/app/index.html b/app/index.html
	--- a/app/index.html
	+++ b/app/index.html
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Ember.js Demos – Zak MacDonald</title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	{{content-for 'head'}}

	+ <link rel="stylesheet" href="vendor/bootstrap.css">
	+ <link rel="stylesheet" href="vendor/highlightjs.css">
	<link rel="stylesheet" href="assets/vendor.css">
	<link rel="stylesheet" href="assets/emberjs-demos.css">

	{{content-for 'head-footer'}}
	</head>
	<body>
	{{content-for 'body'}}

	+ <script src="vendor/highlightjs.js"></script>
	<script src="assets/vendor.js"></script>
	<script src="assets/emberjs-demos.js"></script>

	{{content-for 'body-footer'}}

	</body>
	</html>