Muleify

Static Site Generator | Website Bundler | Asset Compiler | Templating | Preprocessor

Overview

Muleify is the one stop shop for your web front end needs, it is a command line tool that handles all your website development needs. Muleify has a unique no configuration required interface. It automatically handles many tasks such as compiling Sass, Scss, Less, Css, ES6 to ES5, bundling, and minifying. Muleify uses extensions and sub-extensions to automatically handle these tasks. With almost almost zero configuration or changes to existing projects you can get started. If there is a feature you want let me know or make a PR.

Features

Another static site and asset generator you might say.

• zero configuration
• quick and easy
• no learning curve
• based on extensions and sub-extensions
• single page applications support (spa's)
• imports, includes, partials, templates, and layouts
• preprocessor types JavaScript, CSS, SCSS, SASS, LESS, HTML, MD

Install

npm i -g muleify

Changes

• 3.x.x uses async/awiat so node version >=7.6.0
• 2.7.0 removes default sass/scss support. After install if you want to use sass run muleify install-node-sass.

CLI

• muleify -p [options] <input> <output> Packs a folder or file

  • input path to folder or file
  • output path to folder or file
  • -b, --bundle Bundles the output
  • -m, --minify Minifies the output
  • -t, --transpile Transpile the output
  • -w, --watch Watches a file or folder
  • -p, --path <path> Defines the path to watch
  • -s, --serve Serves a folder or file

• muleify -s [options] <input> [output] Serves a folder or file

  • input path to folder
  • output path to folder (optional)
  • -s, --spa Enables single page application mode
  • -c, --cors Enables cross origin resource sharing mode

• muleify -m [options] <input> <output> Creates XML sitemap

  • input path to a folder to generate the sitemap
  • output path to a folder to output sitemap.xml
  • -d, --domain <domain> Inserts domain into sitemap

• muleify -e [options] <input> <output> Creates folders and files from a json file

  • input path to a JSON file
  • output path to a folder

• muleify -i Installs sass/scss compiler (might require sudo)

Extensions

Muleify uses extensions and sub-extensions to process specail file types. Sub-extensions are period separated names. They can be combined in any order or combination. The generated file will not contain the sub-extensions. For example a file in the src folder could be named file.b.e.js and the dist folder it would be named file.js.

Options

ALL

• i - ignore

HTML

• l - layout wraps all view files
• v - view inserted into layout
• p - partial allows file to be imported
• m - minify minify code (under development)

MD

JS

• b - bundle modules ESM to UMD
• t - transpile
  • async/await to promises
  • transpile to browser list defaults
• m - minify minify code
  • @preserve will persist comments.
  • @banner will place comment at document start.

CSS

• b - bundle all imports
• t - transpile
  • transpile to browser list defaults
• m - minify minify code

SCSS

• m - minify minify code

LESS

• m - minify minify code

Includes/Imports/Partials/Layouts

The path includes/imports/partials/layouts are relative from the input folder.

Options

HTML

Note partial relative path from file

• layout a placeholder: <!-- { "layout": "*" } -->
• import a partial: <!-- { "partial": "./header.p.html" } -->
• define a variable: <!-- { "title": "I Am Title" } -->
• import a variable: <!-- { "variable": "title" } -->

MD

Converts to HTML.

JS

Supports ESM import relative path from file and also the node resolution algorithm. For node resolution it will search the node_modules package.js files for "module": "file" or main: "file".

CSS

Note @import relative path from file

SCSS

Sass automatically bundles imports. Note @import relative path from file

LESS

Less automatically bundles imports. Note @import relative path from file

Authors

Alexander Elias

License

Why You Should Choose MPL-2.0 This project is licensed under the MPL-2.0 License