@caedman/bundle-cli

v1.0.1

Published

3 years ago

simple bundle generator

Downloads

0High
0Medium
0Low

caedman

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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

bundle-cli

flags

--watch

--server

--port

--sourcemap

--external

--template

--minify

--jsx

--template

bundle-cli is built thanks to:

Todo