- Node
- npm
- vscode
vscode mjml extension highly recommended but not required: mjml vscode extension (unofficial fork)
Here're some of the project's best features:
- Hot reload development
- build .html file from .mjml
- "clean" git command deletes old build files to rebuild
1. Create a new repo by using this as a template.
2. install all dependencies
npm ci
3. build a HTML file from mjml file.
npm run build
4. For hot reloading dev environment once an HTML file is built.
npm run dev
build
npm run build
Takes the "index.mjml" and builds and "index.html" file.
Note: changing the name of the mjml input file and name of the
HTML output can be configured under the build script in the package.json file.
build:watch
npm run build:watch
Same thing as build but constantly listens for updates
Note: this handldes the "hot-reloading" for the HTML compilation. See the dev script for this and browser "hot-reloading" in parallel.
clean
npm run clean
will delete "index.html" and compressed folders generated from the build or compress script.
compress
npm run compress
Compresses the "img" folder.
deploy
npm run deploy
Runs clean, build, and compress commands in sequential order.
serve
npm run serve
displays "index.html" in a local live server with "hot-reloading".
Note: the default local server port is 3000
dev
npm run dev
Runs build:watch and serve commands in parallel. Will automatically re-compile the "index.html" and updated changes will display on local server.
Note: The command will throw an error if no "index.html" exists. If you get this error, inspect if "index.html" exists and run the build command if neccessary.
Technologies used in the project:
- node
- mjml
- mjml-cli
- npm-run-all
- browser-sync
This project is licensed under the MIT