https://github.com/mrmaxie/bunny-the-bundler
Modular and deadly simple bundler for generating static websites
https://github.com/mrmaxie/bunny-the-bundler
Last synced: 30 days ago
JSON representation
Modular and deadly simple bundler for generating static websites
- Host: GitHub
- URL: https://github.com/mrmaxie/bunny-the-bundler
- Owner: MrMaxie
- License: apache-2.0
- Created: 2019-12-07T16:04:15.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-05-23T19:59:23.000Z (almost 2 years ago)
- Last Synced: 2025-03-28T17:25:39.532Z (about 1 month ago)
- Language: JavaScript
- Size: 198 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Bunny the Bundler
Modular and deadly simple bundler for generating things... mostly static websites.
[//]: # (--docs--)
# Get started
At very beginning install this dependency using command:
```bash
npm install --save-dev bunny-the-bundler
# or
yarn --dev bunny-the-bundler
```
After that we need to set-up our scripts in `package.json`, add entries, for example:
```json
{
"scripts": {
"build": "bunny ./genDocs.html ./result.html"
}
}
```
After that use your script like that:
```bash
npm run build
# or
yarn run build
```
So, like description said - it's simple. First of all create somewhere file with `.html` extension with single `` block with attribute `role="main"`:
```html
<!-- ./genDocs.html -->
<script role="main">
// context-based code here
```
Inside of that block you have access to "context" which will build your script. You can to use [few context available functions](#context) here, but before that set-up some data entry points.
```html
//
.awesome {
color: red;
}
Test
```
Now you know why `.html` is build file extension. Every entry need unique `id` attribute, and content or `src` attribute pointing to source file. We need to load them at very beginning:
```javascript
// ./genDocs.html:script[role="main"]
load(['my-style', 'header', 'readme'])
.then(([myStyle, header, readme]) => {
// Every above variable is string
});
```
Now we have here content of every needed data entry. **This package doesn't contains any of parsers** but you can still install dependencies of your choice. In our example we will need markdown parser, for example [commonmark](https://www.npmjs.com/package/commonmark).
```javascript
// ./generateDocs.html:script[role="main"]
const { Parser, HtmlRenderer } = require('commonmark');
load(['my-style', 'header', 'readme'])
.then(([myStyle, header, readme]) => {
const reader = new Parser();
const writer = new HtmlRenderer();
const parsed = reader.parse(readme);
const readmeHtml = writer.render(parsed);
const html = [
'', myStyle, '',
header,
readmeHtml,
].join('');
save(html); // Save output file
});
```
After that, our `html` variable contains our expected result. We need only to save it using `save()` or `saveFile()`. It's all. Your output file will contain your HTML.
# Context
Context is fully prepared by Bunny, so you can't use typical global variables.
## require(name)
- `name: string` - name of module, it's important that your builder will look for modules in directory of your project, so you can to include any needed module.
- `return: any` - anything that require can returns
## load(ids)
- `ids: string | string[]` - id or array of ids for data entries
- `return: Promise` - promise with result data containing string (for string argument) and array of strings (for array of strings argument)
## save(content)
`save` will write into output file passed in CLI, also after being called run `done()`, so you don't need to call it manually
- `content: string` - data that should be written
- `return: Promise` - promise of saving
## saveFile(filename, content)
`saveFile` will save into file of your choice
- `filename: string` - path to string, can be relative
- `content: string` - data that should be written
- `return: Promise` - promise of saving
## done()
Tell for Bunny that you finished your building process
- `return: void`
## fail(reason)
Tell for Bunny that you finished your building process but with error
- `reason?: string` - reason of fail, can be omitted
- `return: void`
## console
```typescript
{
log: (...args) => void;
error: (...args) => void;
warn: (...args) => void;
info: (...args) => void;
}
```
All of them are just proxies for built-in `console`
# CLI
```
usage: bunny [...commands] [output]
commands:
--watch | -w
-> turns on watchers for needed files and rebuild every
time when any of those files will been edited
--dev [8080] | -d [8080]
-> runs dev server on selected port, also watchers will
turn on
--help | -h
-> shows this message :)
```
## Watch mode
Watch mode will observe all needed files. After every rebuild only list of used files will be observed, so you don't need to pass any kind of glob or list for observing.
## Dev server
Hosts your output file using HTTP server and WebSockets server for automatic reloading after every rebuild. For reloading also watch files, like in [watch mode](#watch-mode).
# License
This project is licensed under the Apache-2.0 License - see the [LICENSE.md](LICENSE.md) file for details