<section>
|
<h1 class="blue" data-id="#plugins/tools"><i class="ace-icon fa fa-desktop grey"></i> Tools</h1>
|
|
<div class="hr hr-double hr32"></div>
|
|
<!-- #section:plugins/tools -->
|
<div class="help-content">
|
<h3 class="info-title smaller" data-id="#plugins/tools.node-js">Node.js</h3>
|
<!-- #section:plugins/tools.node-js -->
|
<div class="info-section">
|
<ul class="info-list list-unstyled">
|
<li>
|
For more information and installing Node.js please see its page at
|
<a href="http://nodejs.org">nodejs.org</a>
|
</li>
|
|
<li>
|
It's optional and you don't need to use it.
|
<br />
|
I've used it for compiling LESS files into CSS and
|
Mustache templates into static HTML
|
</li>
|
</ul>
|
</div>
|
<!-- /section:plugins/tools.node-js -->
|
|
|
|
<h3 class="info-title smaller" data-id="#plugins/tools.less-js">Less.js</h3>
|
<!-- #section:plugins/tools.less-js -->
|
<div class="info-section">
|
<ul class="info-list list-unstyled">
|
<li>
|
Less is a CSS pre-processor which is useful for creating and maintating large amounts of CSS code
|
</li>
|
|
<li>
|
You can find more info about it here <a href="http://lesscss.org/">lesscss.org</a>
|
</li>
|
|
<li>
|
Almost all Ace CSS files are generated from compiling LESS files
|
</li>
|
|
<li>
|
First you need to install less compiler via npm:
|
<code>npm install -g less</code>
|
|
</li>
|
|
<li>
|
To compile LESS files, you can run the following commands:
|
<br />
|
<code>lessc ace.less path/to/ace.css</code>
|
<br />
|
<code>lessc skins/skins.less path/to/ace-skins.css</code>
|
|
<br />
|
For options such as compressing output, etc, you can use its help by using the following command:
|
<br />
|
<code>lessc --help</code>
|
</li>
|
|
<li>
|
You can also use the <a href="../build/css.html">in-browser CSS builder tool</a> to build a custom CSS.
|
</li>
|
</ul>
|
</div>
|
<!-- /section:plugins/tools.less-js -->
|
|
|
|
|
<h3 class="info-title smaller" data-id="#plugins/tools.mustache">Mustache Compilers</h3>
|
<!-- #section:plugins/tools.mustache -->
|
<div class="info-section">
|
<ul class="info-list list-unstyled">
|
<li>
|
Ace's demo pages are mustache templates compiled into HTML
|
</li>
|
|
<li>
|
For more info about Mustache files please see <a href="#files/mustache" class="help-more">Mustache files</a>
|
</li>
|
|
<li>
|
PHP Mustache is used during development.
|
<br />
|
And Javascript Mustache compiler is used for final demo output
|
</li>
|
|
<li>
|
For more info please see the following links:
|
<br />
|
<a href="http://mustache.github.io/">Mustache</a>
|
<br />
|
<a href="https://github.com/janl/mustache.js/">Mustache.js</a>
|
<br />
|
<a href="http://twitter.github.io/hogan.js/">Hogan.js</a>
|
<br />
|
<a href="https://github.com/bobthecow/mustache.php">PHP Mustache</a>
|
</li>
|
</ul>
|
</div>
|
<!-- /section:plugins/tools.mustache -->
|
|
|
|
<h3 class="info-title smaller" data-id="#plugins/tools.uglifyjs">UglifyJS</h3>
|
<!-- #section:plugins/tools.uglifyjs -->
|
<div class="info-section">
|
<ul class="info-list list-unstyled">
|
<li>
|
UglifyJS is a popular tool for minifying Javascript files
|
</li>
|
|
<li>
|
It can also be used inside browser like in the <a href="../build/js.html">Javascript builder tool</a>
|
</li>
|
|
<li>
|
For more info please see <a href="http://lisperator.net/uglifyjs/">lisperator.net/uglifyjs/</a>
|
</li>
|
</ul>
|
</div>
|
<!-- /section:plugins/tools.uglifyjs -->
|
|
|
<!-- /section:plugins/tools -->
|
</section>
|
