| 1 | [Star Issue Watch](https://github.com/AlexanderElias/muleify)
|
| 2 |
|
| 3 | # Muleify
|
| 4 | **Static Site Generator | Website Bundler | Asset Compiler | Templating | Preprocessor**
|
| 5 |
|
| 6 | [](https://travis-ci.org/AlexanderElias/muleify)
|
| 7 |
|
| 8 | ### Overview
|
| 9 | 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.
|
| 10 |
|
| 11 | ### Features
|
| 12 | Another static site and asset generator you might say.
|
| 13 | - zero configuration
|
| 14 | - quick and easy
|
| 15 | - no learning curve
|
| 16 | - based on extensions and sub-extensions
|
| 17 | - single page applications support (spa's)
|
| 18 | - imports, includes, partials, templates, and layouts
|
| 19 | - preprocessor types JavaScript, CSS, SCSS, SASS, LESS, HTML, MD
|
| 20 |
|
| 21 | ### Install
|
| 22 | `npm i -g muleify`
|
| 23 |
|
| 24 | ### Changes
|
| 25 | - 3.x.x uses async/awiat so node version >=7.6.0
|
| 26 | - 2.7.0 removes default sass/scss support. After install if you want to use sass run `muleify install-node-sass`.
|
| 27 |
|
| 28 | ## CLI
|
| 29 | - `muleify -p [options] <input> <output>` Packs folder/file and muleifies
|
| 30 | - `input` path to folder or file
|
| 31 | - `output` path to folder or file
|
| 32 | - `-b, --bundle` Bundles the output
|
| 33 | - `-m, --minify` Minifies the output
|
| 34 | - `-t, --transpile` Transpile the output
|
| 35 | - `-w, --watch` Watches a file or folder
|
| 36 | - `-p, --path <path>` Defines the path to watch
|
| 37 |
|
| 38 | - `muleify -s [options] <input> [output]` Serves a folder and muleifies
|
| 39 | - `input` path to folder
|
| 40 | - `output` path to folder (optional)
|
| 41 | - `-b, --bundle` Bundles the output
|
| 42 | - `-m, --minify` Minifies the output
|
| 43 | - `-t, --transpile` Transpile the output
|
| 44 | - `-w, --watch` Watches a file or folder
|
| 45 | - `-s, --spa` Enables single page application mode
|
| 46 | - `-c, --cors` Enables cross origin resource sharing mode
|
| 47 |
|
| 48 | - `muleify -m [options] <input> <output>` Creates XML sitemap
|
| 49 | - `input` path to a folder to generate the sitemap
|
| 50 | - `output` path to a folder to output sitemap.xml
|
| 51 | - `-d, --domain <domain>` Inserts domain into sitemap
|
| 52 |
|
| 53 | - `muleify -e [options] <input> <output>` Creates folders and files from a json file
|
| 54 | - `input` path to a JSON file
|
| 55 | - `output` path to a folder
|
| 56 |
|
| 57 | - `muleify -i` Installs sass/scss compiler (might require sudo)
|
| 58 |
|
| 59 | ## Extensions
|
| 60 | 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`.
|
| 61 |
|
| 62 | ### Options
|
| 63 |
|
| 64 | #### ALL
|
| 65 | - `i` - ignore
|
| 66 |
|
| 67 | #### HTML
|
| 68 | - `l` - **layout** wraps all view files
|
| 69 | - `v` - **view** inserted into layout
|
| 70 | - `p` - **partial** allows file to be imported
|
| 71 | - `m` - **minify** minify code (under development)
|
| 72 |
|
| 73 | #### MD
|
| 74 |
|
| 75 | #### JS
|
| 76 | - `b` - **bundle** modules ESM to UMD
|
| 77 | - `t` - **transpile** transpile to [> 1%, last 2 versions](http://browserl.ist/?q=%3E+1%25%2C+last+2+versions)
|
| 78 | - `m` - **minify** minify code
|
| 79 | - `@preserve` will persist comments.
|
| 80 | - `@banner` will place comment at document start.
|
| 81 |
|
| 82 | #### CSS
|
| 83 | - `b` - **bundle** all imports
|
| 84 | - `t` - **transpile** transpile to [> 1%, last 2 versions](http://browserl.ist/?q=%3E+1%25%2C+last+2+versions)
|
| 85 | - `m` - **minify** minify code
|
| 86 |
|
| 87 | #### SCSS
|
| 88 | - `m` - **minify** minify code
|
| 89 |
|
| 90 | #### LESS
|
| 91 | - `m` - **minify** minify code
|
| 92 |
|
| 93 | ## Includes/Imports/Partials/Layouts
|
| 94 | The path includes/imports/partials/layouts are relative from the input folder.
|
| 95 |
|
| 96 | ### Options
|
| 97 |
|
| 98 | #### HTML
|
| 99 | Note `partial` relative path from file
|
| 100 | - layout a placeholder: `<!-- { "layout": "*" } -->`
|
| 101 | - import a partial: `<!-- { "partial": "./header.p.html" } -->`
|
| 102 | - define a variable: `<!-- { "title": "I Am Title" } -->`
|
| 103 | - import a variable: `<!-- { "variable": "title" } -->`
|
| 104 |
|
| 105 | #### MD
|
| 106 | Converts to HTML.
|
| 107 |
|
| 108 | #### JS
|
| 109 | 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"`.
|
| 110 |
|
| 111 | #### CSS
|
| 112 | Note `@import` relative path from file
|
| 113 |
|
| 114 | #### SCSS
|
| 115 | Sass automatically bundles imports.
|
| 116 | Note `@import` relative path from file
|
| 117 |
|
| 118 | #### LESS
|
| 119 | Less automatically bundles imports.
|
| 120 | Note `@import` relative path from file
|
| 121 |
|
| 122 | ## Authors
|
| 123 | [AlexanderElias](https://github.com/AlexanderElias)
|
| 124 |
|
| 125 | ## License
|
| 126 | [Why You Should Choose MPL-2.0](http://veldstra.org/2016/12/09/you-should-choose-mpl2-for-your-opensource-project.html)
|
| 127 | This project is licensed under the MPL-2.0 License
|