bundle-cli
Designed to simplify the frontend web development experience with:
-
Search for expressions for the generation of inputs for the bundle eg
example/src/*.{html,md}. -
The analysis on the html files allows the extraction of the files that use the expression by link [href] or [src] attribute.
-
Optimization of the output through the flag
--minify. -
Livereload optimized only for updates of the files associated with the bundle
-
output configuration based on browserslist for css and js, using the flag --browsers
flags
--watch
allows to observe the changes associated with the given expression, bundle-cli is layers to regenerate the build, at the time of creating files that comply with the given expression.
--server
allows you to create a server that synchronizes with the observer if accompanied by the --watch flag
The server provides a resolution of files for spa-type applications, so by not supporting the html document it will point to index.html, but keeping the url concurrent, in turn it will redirect the download of the files to avoid allowing them to coexist in the current folder
--port
allows you to define a port to use or initialize the search if it is already busy.
--sourcemap
allows to enable or disable the generation of sourcemap for js files
--external
if true will associate the dependencies as external to the bundle, you can use a list to define the externals manually, egatomic, preact, react
--template
allows you to define a top level template for markdown or html files
--minify
It allows you to modify the code generated by the bundle, html, css and js.
--jsx
allows you to define the type of pragma to work globally, if you want to use react just define --jsx react
--template
allow you to associate an html template to contain html or md files. eg:
bundle src/*.html public --template my-template.html
my-template example
---
color: red
---
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>title - {{page.title}}</title>
</head>
<body>
<h2>title - {{page.title}}</h2>
template : {{>content}}
<style>
body{ background: {{site.color}} }
</style>
</body>
</html>the use of
---allows to open the yaml metadata to be associated with the template, which is grouped as follows, eg:
{
// template metadata
site: {
color: "red";
}
// metadata of the current page
page: {
}
}You can define the folder property to associate a destination for your html or md file. eg : gallery/1 the template is processed by Handerbars
bundle-cli is built thanks to:
bundle-cli is built with Rollup, Chokidar, Fast-glob, Handerbars, Postcss and other incredible packages
Todo
- [ ] Compress the html by using the --minify flag
- [ ] add test
- [ ] generate sw for pwa
- [ ] add support to customize the order of page groups