Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Branch: master
Fetching contributors…

Cannot retrieve contributors at this time

103 lines (90 sloc) 13.76 kB
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>Brunch - ultra-fast HTML5 build tool</title><meta name="description" content="Brunch builds, lints, compiles, concatenates and shrinks your HTML5 app in an ultra-simple way. No more Grunt / Gulp mess."><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"><link rel="stylesheet" href="styles/app.css"><link rel="publisher" href="https://plus.google.com/+PaulMillerLi"><!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--><!-- Grunticon Loader: place this in the head of your page -->
<script>
/* grunticon Stylesheet Loader | https://github.com/filamentgroup/grunticon | (c) 2012 Scott Jehl, Filament Group, Inc. | MIT license. */
window.grunticon=function(e){if(e&&3===e.length){var t=window,n=!(!t.document.createElementNS||!t.document.createElementNS("http://www.w3.org/2000/svg","svg").createSVGRect||!document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image","1.1")||window.opera&&-1===navigator.userAgent.indexOf("Chrome")),o=function(o){var r=t.document.createElement("link"),a=t.document.getElementsByTagName("script")[0];r.rel="stylesheet",r.href=e[o&&n?0:o?1:2],a.parentNode.insertBefore(r,a)},r=new t.Image;r.onerror=function(){o(!1)},r.onload=function(){o(1===r.width&&1===r.height)},r.src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="}};
grunticon( [ "/images/svg/icons.data.svg.css", "/images/svg/icons.data.png.css", "/images/svg/icons.fallback.css" ] );</script>
<noscript><link href="/images/svg/icons.fallback.css" rel="stylesheet"></noscript></head><body><div id="navbar"><div class="container"><a href="/" class="icon-brunch-logo-web"></a><ul class="nav nav--main-nav"><li><a href="/" class="nav__item--main-nav active">Home</a></li><li><a href="https://github.com/brunch/brunch/tree/master/docs" class="nav__item--main-nav">Docs</a></li><li><a href="https://github.com/brunch/brunch-guide#readme" class="nav__item--main-nav">Guide</a></li><li><a href="/plugins.html" class="nav__item--main-nav">Plugins</a></li><li><a href="/skeletons.html" class="nav__item--main-nav">Skeletons</a></li><li><a href="/examples.html" class="nav__item--main-nav">Examples</a></li><li><a href="/compare.html" class="nav__item--main-nav">Compare</a></li></ul></div></div><div class="hero"><div class="container"><div class="grid"><div class="grid__item one-whole lap-and-up-one-third"><div class="icon-brunch-logo-napkin"></div></div><div class="grid__item one-whole lap-and-up-two-thirds"><div class="hero__content"><h1 class="kilo">Will you be coming to brunch?</h1><h3 class="flush--bottom soft-half--bottom">Brunch...</h3><ul class="nav nav--keywords nav--sentence"><li><strong>compiles</strong> your scripts, templates, styles</li><li><strong>lints</strong> them</li><li><strong>wraps</strong> the scripts and templates in common.js / AMD modules.</li><li><strong>concatenates</strong> scripts and styles</li><li><strong>generates source maps</strong> for concatenated files</li><li><strong>copies</strong> assets and static files</li><li><strong>shrinks</strong> the output by minifying code and optimizing images</li><li><strong>watches</strong> your files for changes</li><li><strong>notifies</strong> you about errors via console and system notifications</li></ul></div></div></div></div></div><div class="page__content container"><div class="grid"><div style="float:right" class="grid__item one-whole desk-one-third"><div class="social-buttons"><span><iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://ghbtns.com/github-btn.html?user=brunch&amp;repo=brunch&amp;type=watch&amp;count=true&amp;size=large" style="width: 160px; height:30px;" class="social-button-github"></iframe></span><span><iframe allowtransparency="true" frameborder="0" scrolling="no" src="https://platform.twitter.com/widgets/follow_button.html?screen_name=brunch&amp;show_count=true&amp;size=l" style="width: 260px; height:30px;" class="social-button-twitter"></iframe></span><span><iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/tweet_button.html?count=horizontal&amp;id=twitter-widget-0&amp;lang=en&amp;original_referer=http%3A%2F%2Flocalhost%3A3333%2F&amp;related=brunch&amp;size=l&amp;text=Brunch%20%7C%20HTML5%20application%20assembler&amp;url=http%3A%2F%2Fbrunch.io&amp;via=brunch&quot; class=&quot;twitter-share-button twitter-tweet-button twitter-count-horizontal" style="width: 130px; height:30px;" class="social-button-twitter"></iframe></span></div><a href="/#why" class="others"><h3>Why Brunch instead of competitors?</h3><img src="/images/others/grunt.png" alt="" height="128"><img src="/images/others/gulp.png" alt="" height="128"></a><div class="tweets"><h3>People love Brunch!</h3><a class="twitter-timeline" data-dnt="true" href="https://twitter.com/brunch/favorites" data-widget-id="397311715655684096">Favorite Tweets by @brunch</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div><h3 style="margin-top: 20px">Community</h3><p>We have a <a href="http://ost.io/@brunch/brunch">Forum</a> and
<a href="http://stackoverflow.com/questions/tagged/brunch">Stack Overflow tag</a>.
We also provide a <a href="http://hellyeah.is/">paid support</a>.</p></div><div class="grid__item one-whole desk-two-thirds"><h1>Brunch is an ultra-fast HTML5 build tool</h1><p>Installation is one-line, once you have <a href="http://nodejs.org/download/">node.js</a>. In your console, run:</p>
<pre><code>npm install -g brunch</code></pre>
<h2 id="getting-started">Getting started</h2>
<h4 id="create-a-new-brunch-project-">Create a new Brunch project:</h4>
<pre><code>brunch new &lt;skeleton-URL&gt; [optional-output-dir]</code></pre>
<p><code>skeleton-URL</code> specifies a <a href="/skeletons.html">skeleton</a> from which your application will be initialized.</p>
<p>There’s a great <a href="https://github.com/brunch/brunch-guide#readme">guide</a> that lets you explore Brunch in-depth!</p>
<p>You can also see the <a href="https://github.com/brunch/brunch/blob/stable/docs/README.md">README</a> for a complete description of app structure.</p>
<h4 id="develop-with-brunch-">Develop with Brunch:</h4>
<pre><code>brunch watch --server</code></pre>
<p>tells Brunch to watch your project and incrementally rebuild it when source files are changed. The optional <code>server</code> flag launches a simple web server with <a href="http://diveintohtml5.info/history.html">pushState</a> support.</p>
<p>If you use OS X and want brunch to show system notification every time compilation error happens, you will need to install <a href="https://github.com/alloy/terminal-notifier">terminal-notifier</a>: <code>brew install terminal-notifier</code>.</p>
<h4 id="build-with-brunch-">Build with Brunch:</h4>
<pre><code>brunch build --production</code></pre>
<p>builds a project for distribution. By default it enables minification.</p>
<h1 id="documentation">Documentation</h1>
<p>All reference docs are available <a href="https://github.com/brunch/brunch/tree/stable/docs">on GitHub</a>.
The best way to discover Brunch is probably to start with the <a href="https://github.com/brunch/brunch-guide#readme">guide</a>.</p>
<h2 id="a-quick-demo">A Quick Demo</h2>
<p>For more info on getting started with Brunch, see <a href="http://alxhill.com/blog/articles/brunch-coffeescript-angular/">the article</a> or <a href="http://vimeo.com/75702540">the introductory video and screencast</a>:</p>
<iframe src="http://player.vimeo.com/video/75702540" style="width: 100%; height: 388px" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<h2>Deploying</h2>
<p>
Brunch-generated applications are a bunch of simple static files. You can
host them everywhere, even on free hostings, like
<a href="http://help.github.com/pages/">GitHub pages</a>.
Because production environments are usually
slightly different than development envs,
brunch has <code>production</code> option.
</p>
<p>To build application that has minified JS and CSS, execute <code>brunch build --production</code>. Then you can deploy it:</p>
<ul>
<li>
If you use <strong>static hosting site</strong>: build your application
on your machine and just upload <code>public/</code>
directory to the directory that is served by a webserver.
</li>
<li>
If you use <strong>hosting that supports node.js</strong>, you can
install brunch there and auto-build app every time.
</li>
<li>
If you prefer <a href="http://heroku.com/">Heroku</a>,
there is <a href="https://gist.github.com/3596447">a nice small guide</a>
on deploying.
Should work even on free instances.
</li>
<li>
If you’re into
<a href="http://help.github.com/pages/">GitHub pages</a>,
you’ll need to build your app,
move <code>public/</code> directory to somewhere,
<a href="http://git-scm.com/book/en/Git-Branching-Basic-Branching-and-Merging">switch to <code>gh-pages</code>
git branch</a>,
remove files from directory and move files from your temporary
dir here.
</li>
</ul>
<h2 id="why">Why Brunch and not Grunt and Gulp</h2>
<p>So, you&#39;re coming from Grunt or Gulp and may be wondering how Brunch is better.</p>
<p>First of all, Brunch is order-of-magnitude simpler. Check out typical configs for alternative build systems: <a href="https://gist.github.com/paulmillr/eb3ae139aadbbb87ab9b#file-grunt-js">Grunt</a>, <a href="https://gist.github.com/paulmillr/eb3ae139aadbbb87ab9b#file-gulp-js">Gulp</a>. And here&#39;s a typical <a href="https://github.com/paulmillr/brunch-with-chaplin/blob/master/brunch-config.coffee">Brunch config</a> for comparison.</p>
<p>The reason for the big difference is <em>design</em>. Grunt is merely a set of tasks that would be executed one after another. When this may seem more flexible on a first glance, in reality it isn&#39;t. With plugins, Brunch could do anything Grunt tasks do (and beyond). Brunch even has an adapter for Grunt tasks. Gulp is &quot;better Grunt&quot;, as they market it; or so may it seem. Gulp doesn&#39;t make temporary files, that&#39;s why it&#39;s a &quot;streaming build system&quot;. Still, it&#39;s not enough. Brunch&#39;s goal, in contrast, is to provide you with simplest and fastest possible way of managing and building your HTML5 app.</p>
<p>Think of it. In every app you take a set of files and produce new files with them. You may use different languages, include code quality testers such as JSHint or minify the output, but the basic pipeline is always the same. That&#39;s why all brunch plugins may take one of a few predefined roles.</p>
<p>Besides configs, brunch is also simpler in terms of commands. Grunt / Gulp commands replicate all plugins it loads. Brunch always has three commands: <code>new</code>, <code>build</code> and <code>watch</code>. Build / watch commands may receive optional <code>production</code> flag which will tell Brunch to optimize assets, javascripts and stylesheets.</p>
<p>You can find a more in-depth discussion of what sets Brunch apart in <a href="https://github.com/brunch/brunch-guide/blob/master/content/en/chapter01-whats-brunch.md#readme">chapter 1 of the guide</a>.</p>
<h2>Brought to you by</h2><ul class="block-list builders"><li><a href="http://paulmillr.com/" rel="author"><img src="https://secure.gravatar.com/avatar/d342e4ef045c54a6a6f41d070d8a0406?s=140&amp;d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-140.png" width="48" alt="Paul Miller"><span class="name">Paul</span> Miller</a></li><li><a href="https://github.com/es128"><img src="https://secure.gravatar.com/avatar/c8c06173c01b4e95594e4af3a8a815f1?s=140&amp;d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-140.png" width="48" alt="Elan Shanker"><span class="name">Elan</span> Shanker</a></li><li><a href="http://nikgraf.com/"><img src="https://secure.gravatar.com/avatar/8fc75580dbacd91ff28514b68baf1a8a?s=140&amp;d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-140.png" width="48" alt="Nik Graf"><span class="name">Nik</span> Graf</a></li><li><a href="http://ramen.io/"><img src="https://secure.gravatar.com/avatar/37c5132eed30539456c79906dd8c6065?s=140&amp;d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-140.png" width="48" alt="Thomas Schranz"><span class="name">Thomas</span> Schranz</a></li></ul></div></div><footer><hr class="rule"><p><small>Hosted on <a href="https://github.com/brunch/brunch.github.com">GitHub Pages</a>. The content on this website is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/3.0/deed.en_US">CC BY 3.0</a>. Logo by <a href="http://helle.in">Michael Hellein</a></small></p></footer></div><script src="scripts/app.js"></script><script>require('scripts/app');
</script> <script type="text/javascript">
var _gauges = _gauges || [];
(function() {
var t = document.createElement('script');
t.type = 'text/javascript';
t.async = true;
t.id = 'gauges-tracker';
t.setAttribute('data-site-id', '4f1631bbcb25bc723b000007');
t.src = '//secure.gaug.es/track.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(t, s);
})();
</script>
</body></html>
Jump to Line
Something went wrong with that request. Please try again.