node package manager
Painless code sharing. npm Orgs help your team discover, share, and reuse code. Create a free org ยป

muleify

Star Issue Watch

Muleify

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

Build Status

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 pack [options] <input> <output> Packs folder/file and muleifies

    • input path to folder or file
    • output path to folder or file
    • -e, --es ES transpile the output
    • -b, --bundle Bundles the output
    • -m, --minify Minifies the output
    • -w, --watch Watches a file or folder
    • -p, --path <path> Defines the path to watch
  • muleify serve [options] <input> [output] Serves a folder and muleifies

    • input path to folder
    • output path to folder (optional)
    • -e, --es Transpile to ES5
    • -b, --bundle Bundles the output
    • -m, --minify Minifies the output
    • -w, --watch Watches a file or folder
    • -s, --spa Enables single page application mode
    • -c, --cors Enables cross origin resource sharing mode
  • muleify map [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 encamp [options] <input> <output> Creates folders and files from a json file

    • input path to a JSON file
    • output path to a folder
  • muleify install-sass 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
  • e - es transpile to ES5
  • m - minify minify code
    • @preserve will persist comments.
    • @banner will place comment at document start.

CSS

  • b - bundle all imports
  • 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

AlexanderElias

License

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