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

FAQs

What is @caedman/bundle-cli?

Is @caedman/bundle-cli popular?

Is @caedman/bundle-cli well maintained?

Package last updated on 16 Aug 2020

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

@caedman/bundle-cli

bundle-cli

flags

--watch

--server

--port

--sourcemap

--external

--template

--minify

--jsx

--template

bundle-cli is built thanks to:

Todo

Related posts

Rolldown Pulls Rust React Compiler Integration After Binary Size Increase

Miasma Mini Shai-Hulud Hits LeoPlatform npm Packages and GitHub Actions, Expands to the Go Ecosystem