forked from brunch/brunch.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
/
plugins.html
207 lines (194 loc) · 17.9 KB
/
plugins.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
<!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="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"><!--[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">Home</a></li><li><a href="https://github.com/brunch/brunch/tree/stable/docs" class="nav__item--main-nav">Docs</a></li><li><a href="/plugins.html" class="nav__item--main-nav active">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><li><a href="/support.html" class="nav__item--main-nav">Support</a></li><li><a href="https://brunch.roon.io/" class="nav__item--main-nav">Blog</a></li></ul></div></div><div class="page__content container"><h1 id="plugins">Plugins</h1>
<p>
Brunch has a plugin ecosystem to achieve interoperability
with various stuff simply via
<a href="https://github.com/brunch/brunch/blob/stable/docs/plugins.md">plugin API</a>
</p>
<p>
For example, if you use JavaScript files in your project,
you’ll need a plugin that adds JS support.
Same with styles, templates, minifiers, linters and much more.
</p>
<p>
To install new plugin, simply execute <code>npm install --save plugin-name</code>. This will install its node.js dependencies and save to <code>package.json</code>. Search for <a href="https://www.npmjs.org/search?q=brunch">brunch on npm</a> for even more plug-ins.
</p>
<p>To remove it, edit <code>package.json</code>’s <code>dependencies</code> hash.
See <a href="http://npmjs.org/doc/json.html#dependencies">npm docs</a>
for more docs on packages.
</p>
<div class="markdown-body">
<h1>
<a name="plugins" class="anchor" href="#plugins"><span class="octicon octicon-link"></span></a>Plugins</h1>
<p>If you want to <strong>add your project here</strong>, simply <a href="https://github.com/brunch/brunch.github.io/blob/brunch/app/plugins.jade">edit this page</a> and submit a pull request.</p>
<h2>
<a name="compilers" class="anchor" href="#compilers"><span class="octicon octicon-link"></span></a>Compilers</h2>
<h3>
<a name="script-languages" class="anchor" href="#script-languages"><span class="octicon octicon-link"></span></a>Script languages</h3>
<ul>
<li>
<a href="https://github.com/brunch/javascript-brunch">JavaScript-brunch</a>. Provides JS support out-of-box. Without it, your JS files will be ignored.</li>
<li>
<a href="https://github.com/brunch/coffee-script-brunch">CoffeeScript</a>. <a href="http://coffeescript.org/">CoffeeScript</a> is unfancy JavaScript.</li>
<li>
<a href="https://github.com/brunch/iced-coffee-script-brunch">IcedCoffeeScript-brunch</a>. <a href="http://maxtaco.github.com/coffee-script/">IcedCoffeeScript</a> is a CoffeeScript with async syntax.</li>
<li>
<a href="https://github.com/brunch/LiveScript-brunch">LiveScript-brunch</a>. <a href="http://gkz.github.com/LiveScript/">LiveScript</a> is more functional and feature rich CoffeeScript dialect.</li>
<li>
<a href="https://github.com/huafu/ember-script-brunch">EmberScript</a>. <a href="http://emberscript.com/">EmberScript</a> is Ember tasted CoffeeScript.</li>
<li>
<a href="https://github.com/brunch/roy-brunch">Roy-brunch</a>. <a href="http://roy.brianmckenna.org/">Roy</a> is a small functional language that compiles to js.</li>
<li>
<a href="https://github.com/joshheyse/typescript-brunch">typescript-brunch</a>. <a href="http://www.typescriptlang.org/">typescript</a> is a typed superset of JavaScript that compiles to plain JavaScript.</li>
<li>
<a href="https://github.com/rcs/jsenv-brunch">jsenv-brunch</a>. Add support for compiling environment variables into javascript includes. Useful for Heroku and production/development configuration differences.</li>
<li>
<a href="https://github.com/sandy98/wisp-brunch">wisp-brunch</a>. Adds support for <a href="https://github.com/Gozala/wisp">Wisp</a>, which is a cute Clojure-like Lisp.</li>
<li>
<a href="https://github.com/darthapo/react-brunch">react-brunch</a>. Adds support for <a href="http://facebook.github.io/react/">React</a> templates.</li>
<li>
<a href="https://github.com/gcollazo/es6-module-transpiler-brunch">es6-module-transpiler-brunch</a>. Adds ES6 module syntax support via <a href="https://github.com/square/es6-module-transpiler">es6-module-transpiler</a>.</li>
<li>
<a href="https://github.com/e-jigsaw/sweet-js-brunch">sweet-js-brunch</a>. Adds support for <a href="http://sweetjs.org/">sweet.js</a>.</li>
</ul><h3>
<a name="style-languages" class="anchor" href="#style-languages"><span class="octicon octicon-link"></span></a>Style languages</h3>
<ul>
<li><a href="https://github.com/brunch/css-brunch">CSS-brunch</a></li>
<li>
<a href="https://github.com/brunch/stylus-brunch">Stylus-brunch</a>. <a href="http://learnboost.github.com/stylus/">Stylus</a> is robust & powerful style lang. Comes with <a href="http://visionmedia.github.com/nib/"><strong>nib</strong></a> — library of CSS3 cross-browser mixins. See <a href="https://gist.github.com/2005644#gistcomment-89957">why Stylus is better than LESS / Sass</a>.</li>
<li>
<a href="https://github.com/brunch/sass-brunch">Sass-brunch</a>. <a href="http://sass-lang.com">Sass</a> is pretty popular in ruby community. Comes with <a href="http://compass-style.org"><strong>compass</strong></a> support.</li>
<li>
<a href="https://github.com/brunch/less-brunch">LESS-brunch</a>. <a href="http://lesscss.org">LESS</a> is the most popular dynamic stylesheet language.</li>
<li>
<a href="https://github.com/anthonyshort/compass-brunch">Compass Brunch</a> Compiles a project using Compass with support for the configuration file.</li>
<li>
<a href="https://github.com/bolasblack/rework-brunch">Rework Brunch</a> Compiles a project using <a href="https://github.com/visionmedia/rework">Rework</a> with support for the configuration file.</li>
<li>
<a href="https://www.npmjs.org/package/pleeease-brunch">Pleeease-brunch</a>. <a href="pleeease.io">Pleeease</a> is a css post-processor built with PostCSS. It adds prefixes, packs media queries, minification and provides some polyfills too.</li>
<li>
<a href="https://github.com/iamvdo/postcss-brunch">PostCSS Brunch</a> Compiles a project using <a href="https://github.com/ai/postcss">PostCSS</a> (a CSS postprocessor). Add as many PostCSS based polyfills as you want (like Autoprefixer)</li>
<li>
<a href="https://github.com/lydell/autoprefixer-brunch">autoprefixer-brunch</a>. <a href="https://github.com/ai/autoprefixer">autoprefixer</a> parses plain CSS and takes care of all vendor prefixes, using data from the <a href="http://caniuse.com/">Can I use...</a> compatibility tables.</li>
<li>
<a href="https://github.com/garetht/csscomb-brunch">csscomb-brunch</a>. <a href="http://http://csscomb.com/">CSSComb</a> sorts your CSS properties in a specified order and keeps related properties together.</li>
<li>
<a href="https://github.com/jas/stylus-spritesmith-brunch">stylus-spritesmith-brunch</a>. Adds Stylus support with <a href="http://visionmedia.github.com/nib/">nib</a> and sprite sheet generation via <a href="https://github.com/Ensighten/spritesmith">Spritesmith</a>.</li>
</ul><h3>
<a name="pre-compiled-templates" class="anchor" href="#pre-compiled-templates"><span class="octicon octicon-link"></span></a>Pre-compiled templates</h3>
<ul>
<li>
<a href="https://github.com/brunch/handlebars-brunch">Handlebars-brunch</a>. <a href="http://handlebarsjs.com/">Handlebars</a> are semantic logic-less templates, compatible with Mustache.</li>
<li>
<a href="https://github.com/bartsqueezy/ember-handlebars-brunch">Ember-handlebars-brunch</a>. Adds support for pre-compiling Handlebars templates for specific use within <a href="http://emberjs.com/">Ember.js</a> applications.</li>
<li>
<a href="https://github.com/brunch/eco-brunch">Eco-brunch</a>. <a href="https://github.com/sstephenson/eco">Eco</a> is embedded coffeescript templates that features ERB-like syntax.</li>
<li>
<a href="https://github.com/mdp/hoganjs-brunch">Mustache (hogan)-brunch</a>. <a href="http://twitter.github.com/hogan.js/">Mustache</a> templates are logic-less and supported in many languages. Hogan is twitter implementation of mustache.</li>
<li>
<a href="https://github.com/brunch/jade-brunch">Jade-brunch</a>. <a href="http://jade-lang.com/">Jade</a> is a haml big brother with much cleaner syntax.</li>
<li>
<a href="https://github.com/sandosh/dustjs-brunch">Dust-brunch</a>. <a href="http://akdubya.github.com/dustjs/">Dust</a> is a templating engine designed to provide a clean separation between presentation and logic without sacrificing ease of use.</li>
<li>
<a href="https://github.com/mgarbacz/dustjs-linkedin-brunch">Dust-linkedin-brunch</a>. <a href="http://linkedin.github.com/dustjs/">Dust(LinkedIn)</a> is a fork of the original <a href="http://akdubya.github.com/dustjs/">Dust</a>. LinkedIn will gradually be extending this library with core feature enhancements, helper functions and bug fixes.</li>
<li>
<a href="https://github.com/GulinSS/jade-angularjs-brunch">Jade-angularjs-brunch</a>. Jade to AngularJS module compiler. A la <a href="https://npmjs.org/package/grunt-angular-templates">Grunt-angular-templates</a> but for Brunch and Jade.</li>
<li>
<a href="https://github.com/machty/emblem-brunch">Emblem-brunch</a>. <a href="http://emblemjs.com/">Emblem</a> is a concise, beautiful and compatible templating alternative for handlebars.</li>
<li>
<a href="https://github.com/jupl/markdown-brunch">Markdown-brunch</a>. <a href="http://en.wikipedia.org/wiki/Markdown">Markdown</a> allows you to write using an easy-to-read, easy-to-write plain text format, then convert it to structurally valid XHTML (or HTML).</li>
<li>
<a href="https://github.com/sir-dunxalot/yaml-front-matter-brunch">Yaml-front-matter-brunch</a> compiles markdown files with <a href="https://www.npmjs.org/package/yaml-front-matter">YAML front matter</a> into javascript objects with markdown support.</li>
<li>
<a href="https://github.com/wmdmark/swig-brunch">Swig-brunch</a>. <a href="http://paularmstrong.github.io/swig/">Swig</a> is a Django-like templating engine for node.js and the browser.</li>
<li>
<a href="https://github.com/obmarg/ractive-brunch">Ractive-brunch</a>. <a href="http://www.ractivejs.org/">RactiveJS</a> is a client side templating and DOM binding engine.</li>
<li>
<a href="https://github.com/PxlBuzzard/nunjucks-brunch">nunjucks-brunch</a>. <a href="http://jlongster.github.io/nunjucks/">Nunjucks</a> is a rich and powerful templating language for JavaScript.</li>
<li>
<a href="https://github.com/aberman/html2js-brunch">html2js-brunch</a>. <a href="https://github.com/aberman/html2js-brunch">Html2JS</a> mimics the functionality of <a href="https://github.com/karlgoldstein/grunt-html2js">grunt-html2js</a> by converting Angular templates into JavaScript.</li>
</ul><h2>
<a name="minifiers" class="anchor" href="#minifiers"><span class="octicon octicon-link"></span></a>Minifiers</h2>
<ul>
<li>
<a href="https://github.com/brunch/uglify-js-brunch">UglifyJS-brunch</a>. <a href="https://github.com/mishoo/UglifyJS">UglifyJS</a> is a popular JavaScript minifier.</li>
<li>
<a href="https://github.com/brunch/clean-css-brunch">CleanCSS-brunch</a>. <a href="https://github.com/GoalSmashers/clean-css">CleanCSS</a> is CSS minifier.</li>
<li>
<a href="https://github.com/ThomasConner/bless-brunch.git">Bless-brunch</a> Blesses css files to help out IE browsers with their restrictions for large css files.</li>
</ul><h2>
<a name="linters" class="anchor" href="#linters"><span class="octicon octicon-link"></span></a>Linters</h2>
<ul>
<li>
<a href="https://github.com/brunch/jshint-brunch">JSHint-brunch</a>. <a href="http://www.jshint.com/">JSHint</a> is a community-driven tool to detect errors and potential problems in JavaScript code and to enforce your team's coding conventions.</li>
<li>
<a href="https://github.com/ilkosta/coffeelint-brunch">CoffeeLint-brunch</a>. <a href="http://www.coffeelint.org/">CoffeeLint</a> is a style checker that helps keep <a href="http://coffeescript.org/">CoffeeScript</a> code clean and consistent.<br>
</li>
</ul><h2>
<a name="others" class="anchor" href="#others"><span class="octicon octicon-link"></span></a>Others</h2>
<ul>
<li>
<a href="https://github.com/ilkosta/static-jade-brunch">Static-jade-brunch</a> — compiles static asset files to html. With it you can get rid of <code>index.html</code> and use <code>index.jade</code> instead.</li>
<li>
<a href="https://github.com/slattery/static-underscore-brunch">Static-underscore-brunch</a> — same, but for underscore.js.</li>
<li>
<a href="https://github.com/jcruz2us/docco-brunch">Docco-brunch</a> — adds <a href="http://jashkenas.github.com/docco/">Docco</a> documentation generator for your <code>app/</code> directory.</li>
<li>
<a href="https://github.com/MazeMap/jsdoc-brunch">JSDoc-brunch</a> — adds <a href="https://github.com/jsdoc3/jsdoc">JSDoc</a> documentation generator for your <code>app/</code> directory.</li>
<li>
<a href="https://github.com/brunch/auto-reload-brunch">Auto-reload-brunch</a> - Adds automatic browser reloading support to brunch.</li>
<li>
<a href="https://github.com/mikeedwards/process-env-brunch">Process-env-brunch</a> - Parses brunch files and replaces the <code>_PROCESS_ENV_FOO</code> token with the value of <code>process.env.FOO</code>.</li>
<li>
<a href="https://github.com/steffenmllr/imageoptmizer-brunch">imageoptmizer-brunch</a> — Optimize PNG and JPG images on --optimize. It either uses jpegtran and optipng or node-smushit </li>
<li>
<a href="https://github.com/garetht/retina-brunch">retina-brunch</a> — Automatically generates non-Retina versions of images in a specified watch folder. Customizable. </li>
<li>
<a href="https://github.com/shiwano/dependency-brunch">dependency-brunch</a> — Adds <code>dependOn</code> option to brunch config.</li>
<li>
<a href="https://github.com/bolasblack/keyword-brunch">keyword-brunch</a> - Adds <code>keyword</code> option to brunch config, replace the keyword after every time compiled.</li>
<li>
<a href="https://github.com/huafu/keyword-brunch">keyword-brunch</a> - An updated version of <code>keyword-brunch</code>, faster, more flexible and available in the npm repository.</li>
<li>
<a href="https://github.com/mllrsohn/sprite-brunch">sprite-brunch</a> — Language agnostic sprite generator for brunch </li>
<li>
<a href="https://github.com/jonuy/jspreprocess-brunch">jspreprocess-brunch</a> — Adds C-style preprocessor directive support to JS brunch compilations.</li>
<li>
<a href="https://github.com/aliel/groundskeeper-brunch">groundskeeper-brunch</a> - Clean javascript files (remove console.log ect...) using <a href="https://github.com/Couto/groundskeeper">groundskeeper</a>.</li>
<li>
<a href="https://github.com/banyan/gzip-brunch">gzip-brunch</a> - Adds gzip support to brunch.</li>
<li>
<a href="https://github.com/brunch/appcache-brunch">appcache-brunch</a> - Adds HTML5 .appcache generation to brunch.</li>
<li>
<a href="https://github.com/Creative-Licence-Digital/after-brunch">after-brunch</a> - Execute arbitrary system commands after each compile cycle.</li>
<li>
<a href="https://github.com/mutewinter/brunch-signature">brunch-signature</a> - generates a unique signature as part of the build process.</li>
<li>
<a href="https://github.com/mutewinter/digest-brunch">digest-brunch</a> - appends a unique SHA digest to asset filenames.</li>
<li>
<a href="https://github.com/meleyal/git-digest-brunch">git-digest-brunch</a> - cache busts urls using the SHA digest of the current git revision.</li><br><li>
<a href="https://github.com/ktmud/yaml-i18n-brunch">yaml-i18n-brunch</a> - use yaml to edit i18n translations.</li>
<li>
<a href="https://github.com/Tomtomgo/constangular-brunch">constangular-brunch</a> - environment aware YAML configurations for AngularJS.</li>
</ul>
</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>