CocoDoc is a desktop utility program designed to build single file web documents and web applications from multiple files.
With CocoDoc, your html and resources can run directly without compilation, but can also be consolidated without adding build files.
Requires Java 1.8.0u40 or upper.
Major features:
- Hierarchically merge files and apply filters such as content replacement or convert to base64.
- Replace tag content or property with data, like replacing relative img src with data uri.
- Parse HTML to generate Table of Content, Index, and/or Glossary.
- Minify HTML, CSS, and JS in one go as part of the build process.
- Parallel processing architecture that make the best use of multi-core processors.
- GUI with live progress tree that let you drill down the process.
License: GNU Lesser GPL v3
CocoDoc does not need to be installed - just download, launch, and point it to the build file. Windows users should download the exe file, Linux and Mac users may download the jar file.
The build file is assumed to be a text file containing commands, that the program will follows to build your project.
The most basic commands are "include file" and "output file":
<!DOCTYPE html><srcipt>
<?coco "js/jquery.min.js" ?>
</script>
<?coco-output "myapp.html" ?>This code will includes content from "js/jquery.min.js" (relative to current file) into the <srcipt> tag, and export everything to "myapp.html" (again relative to current file).
You can also split the code into many small files. Like a real program.
- master.html
<!DOCTYPE html><srcipt><?coco "js/jquery.min.js" ?></script> <body><?coco "body.html" coco ?> <?coco-output "myapp.html" ?>- body.html
<?coco-start trim(line) ?> <h1> Part 1 </h1> <?coco "part1.html" ?> <h1> Part 2 </h1> <?coco "part2.html" ?> <?coco-end?>
In the above example, master.html includes both jquery.min.js and body.html, the later containing the coco task which means it will run contained coco directives.
body.html, in turn, includes two other files by declaring a block that will be line-trimmed (Task trim(line)).
Defining and using variable is simple:
<?coco define( varname, value ) ?>
<?coco var( varname ) ?>Replacing content can be done with regular expression:
<?coco-start replace( "(\d+).(\d+)", "$1,$2" ) ?> 12.3 <?coco-end?>
The above code replace 12.3 with 12,3.
To link an external resource while keeping build instructions, use delete task to remove the link during build.
<link href="style.css" rel="stylesheet" />
<style> <?coco "style.css" delete( the line before ) ?> </style>
<script src="script.js"></script>
<script> <?coco "script.js" delete( the line before ) ?> </script>Other building tasks, such as minification or cdata wrap, can also be applied.
Without CocoDoc processing, this will cause a syntax error because xml directive is not js or css code.
Solutions include comments, position task, or prefix&postfix tasks.
A variation of embedding is the datauri shortcut:
<img src='img/cocodoc.png' /><?coco-datauri "img/cocodoc.png" position( src of img before this ) ?>
or in case of CSS:
background-image: url("<?coco-datauri "img/bkgd.png" delete( the line after this ) ?>")
background-image: url("img/bkgd.png")Both code will read the image file (relative to current file), convert it to a data uri, and replace the original linked image. This can be used to create a master pages that works both in multiple document mode (e.g. for easy development) and can be compiled to generate a single deployable.
Please note that the file need to be well formed XML to use tag based position / delete task. If you do not use delete, position, or html, or if you position only by line, then it is not required.
The html task will parse content as XML for XHTML headers, index terms, and glossary terms.
<?coco html(toc)?> <!-- Output Table of Content -->
<?coco-start html ?> <!-- Parse HTML -->
<h1 id='h1'> Header </h1>
<h2 id='a' class='a'> A </h2>
<div data-coco-index="Coco"> An Index term. </div>
<div data-coco-glossary="Doc"> A Glossary term. </div>
<h2 id='b' class='b'> B </h2>
<div data-coco-index="Coco"> Another Index term. </div>
<div data-coco-glossary="Doc"> Another Glossary term. </div>
<?coco-end?>
<div id="index"> <?coco html(index)?> </div> <!-- Output Index -->
<div id="glossary"> <?coco html(glossary)?> </div> <!-- Output Glossary -->The above code will produce this:
<ol class='h0'>
<li class='h1'><a href="#h1"> Header </a>
<ol class='h1'>
<li class='h2'><a href="#a" class='a'> A </a></li>
<li class='h2'><a href="#b" class='b'> B </a></li>
</ol> </li>
</ol>
<!-- Original content goes here -->
<div id="index"> <dl>
<dt>Coco</dt>
<dd><a href="#a">1.1. A</a></dd>
<dd><a href="#b">1.2. B</a>
</dd></dl> </div>
<div id="glossary"> <dl>
<dt>Doc</dt>
<dd><div> A Glossary term. </div></dd>
<dd><div> Another Glossary term. </div></dd>
</dl> </div>
CocoDoc is built-in with:
- Babel JS convertor (formerly 6to5) ver 5.5.4
- Less CSS compiler, ver 2.5.1
- UglifyJS2 JS minifier, ver 2.4.23
- UglifyCSS CSS minifier, ver 0.0.15
They are all heavy process. It is often best to include all js and css then minify or convert in one go, and be patient. Keeping CocoDoc open can dramatically cut down the warm up time of rebuilds (thanks to Java JIT).
Minify / convert inline data and protect with cdata:
<?coco-start trim( html, oneline ) ?><!DOCTYPE html> <style > <?coco file( "style.css", "ui.css" ) css(minify) cdata(css) ?> </style> <script> <?coco file( "script.js", "ui.js" ) js(minify) cdata(js) ?> </script> <style > <?coco file( "sheet.less","less.css" ) css(less) cdata(css) ?> </style> <script> <?coco file( "es2015.js", "es5.js" ) js(es5) cdata(js) ?> </script> <body><!-- HTML comments will be removed by trim( html ), above --></body> <?coco-end?>
Minify / convert external data:
<?coco-start?><?coco "style.css" css(minify) ?><?coco-output "min.css" ?><?coco-end?> <?coco-start?><?coco "script.js" js(minify) ?><?coco-output "min.js" ?><?coco-end?> <?coco-start?><?coco "sheet.less" css(less) ?><?coco-output "less.css" ?><?coco-end?> <?coco-start?><?coco "es2015.js" js(es5) ?><?coco-output "es5.js" ?><?coco-end?>
Note that since Java is not Node.js, file access such as @import is unavailable.
Passing file names as parameters will cause CocoDoc to build those files and, when finished, starts auto-close countdown.
If there are no file parameters, CocoDoc will look for the file build.cocodoc.conf to auto-run and auto-close.
Note that CocoDoc currently cannot run headless (without GUI).