From cc5e6b30516feea16647e7da85d82f7e54600219 Mon Sep 17 00:00:00 2001 From: Justin Sisley Date: Tue, 17 Oct 2017 13:52:28 -0700 Subject: [PATCH] v2.2.0 --- README.md | 4 ++ demo/output/body.html | 93 ++++++++++++++++++++++++++++++++++++++ demo/templates/body.mjml | 63 ++++++++++++++++++++++++++ demo/templates/footer.mjml | 16 +++++++ demo/templates/header.mjml | 14 ++++++ lerna.json | 6 --- package.json | 16 +++---- src/builder/index.js | 26 +++++++---- src/watcher/index.js | 16 ++++++- 9 files changed, 229 insertions(+), 25 deletions(-) create mode 100644 demo/output/body.html create mode 100644 demo/templates/body.mjml create mode 100644 demo/templates/footer.mjml create mode 100644 demo/templates/header.mjml delete mode 100644 lerna.json diff --git a/README.md b/README.md index ceacd8a..bca897a 100644 --- a/README.md +++ b/README.md @@ -45,6 +45,8 @@ mju --build -i ./templates -o ./build The `--build` command requires input (`-i`) and output (`-o`) arguments. `-i` is the directory in which your raw MJML templates are located, and `-o` is the directory you would like the compiled HTML files written to. With the optional extension (`-e`) argument you can specify the output file extension (default: `.html`) to your liking. +> Note: only files with the `.mjml` file extension will be compiled. + ```bash mju --build -i ./templates -o ./build -e .handlebars ``` @@ -53,6 +55,8 @@ mju --build -i ./templates -o ./build -e .handlebars The `mju --watch` command will monitor all MJML templates in a specified directory and compile them to HTML every time they're modified. +> Note: only files with the `.mjml` file extension will be compiled. + ```bash mju --watch -i ./templates -o ./build ``` diff --git a/demo/output/body.html b/demo/output/body.html new file mode 100644 index 0000000..055c040 --- /dev/null +++ b/demo/output/body.html @@ -0,0 +1,93 @@ + + + + + + + + + + + + + + + + + + + + + + + +
+
Thanks for signing up.
+
Magic Login Button
+ + \ No newline at end of file diff --git a/demo/templates/body.mjml b/demo/templates/body.mjml new file mode 100644 index 0000000..4cddf6c --- /dev/null +++ b/demo/templates/body.mjml @@ -0,0 +1,63 @@ + + + + + + + + + + .link-nostyle { + color: inherit; + } + + + + + + + + + + + + + Thanks for signing up. + + + + + + + + Magic Login Button + + + + + + + + \ No newline at end of file diff --git a/demo/templates/footer.mjml b/demo/templates/footer.mjml new file mode 100644 index 0000000..262e8a7 --- /dev/null +++ b/demo/templates/footer.mjml @@ -0,0 +1,16 @@ + + + + © 2017 Company + + + \ No newline at end of file diff --git a/demo/templates/header.mjml b/demo/templates/header.mjml new file mode 100644 index 0000000..31fc30b --- /dev/null +++ b/demo/templates/header.mjml @@ -0,0 +1,14 @@ + + + + Hello from Company! + + + \ No newline at end of file diff --git a/lerna.json b/lerna.json deleted file mode 100644 index 6f9cfa5..0000000 --- a/lerna.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "lerna": "2.0.0-rc.4", - "packages": [ - "packages/*" - ] -} diff --git a/package.json b/package.json index 4771daa..fc7d5b9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "mjml-utils", - "version": "2.1.0", + "version": "2.2.0", "author": "Justin Sisley", "description": "The utility belt for MJML developers", "repository": "https://github.com/justinsisley/mjml-utils", @@ -11,14 +11,15 @@ "mju": "./src/mjml-utils.js" }, "scripts": { - "lint": "eslint src" + "lint": "eslint src", + "demo:watcher": "node ./src/mjml-utils.js --watch -i ./demo/templates/ -o ./demo/output/" }, "dependencies": { "chokidar": "^1.7.0", - "inquirer": "^3.2.0", - "mjml": "^3.3.3", - "nodemailer": "^4.0.1", - "yargs": "^8.0.2" + "inquirer": "^3.3.0", + "mjml": "^3.3.5", + "nodemailer": "^4.2.0", + "yargs": "^9.0.1" }, "devDependencies": { "babel-preset-es2015": "^6.24.1", @@ -27,7 +28,6 @@ "eslint-config-airbnb": "^15.0.2", "eslint-plugin-import": "^2.7.0", "eslint-plugin-jsx-a11y": "^5.0.3", - "eslint-plugin-react": "^7.1.0", - "lerna": "^2.0.0" + "eslint-plugin-react": "^7.4.0" } } diff --git a/src/builder/index.js b/src/builder/index.js index b5b2f67..121a21b 100644 --- a/src/builder/index.js +++ b/src/builder/index.js @@ -19,19 +19,25 @@ function mkdir(directory) { } builder.build = (filePath, outputDir, extension) => { - const outputPath = path.join(process.cwd(), outputDir); - mkdir(outputPath); - - const startTime = Date.now(); - const data = fs.readFileSync(`${filePath}`, 'utf8'); - const rendered = mjml2html(data); const filename = getTemplateFilename(filePath).replace('.mjml', extension); - fs.writeFileSync(`${outputPath}/${filename}`, rendered.html); + try { + const outputPath = path.join(process.cwd(), outputDir); + mkdir(outputPath); - const endTime = Date.now(); - const totalTime = endTime - startTime; - console.log(`Rendered ${filename} in ${totalTime}ms`); // eslint-disable-line + const startTime = Date.now(); + const data = fs.readFileSync(`${filePath}`, 'utf8'); + const rendered = mjml2html(data); + + fs.writeFileSync(`${outputPath}/${filename}`, rendered.html); + + const endTime = Date.now(); + const totalTime = endTime - startTime; + console.log(`Rendered ${filename} in ${totalTime}ms`); // eslint-disable-line + } catch (error) { + console.error(`Unable to render ${filename}`); + console.error(error.message); + } }; builder.buildAll = (inputDir, outputDir, extension) => { diff --git a/src/watcher/index.js b/src/watcher/index.js index c621dc7..243bfda 100644 --- a/src/watcher/index.js +++ b/src/watcher/index.js @@ -3,6 +3,16 @@ const chokidar = require('chokidar'); const build = require('../builder').build; module.exports = (inputDir, outputDir, extension) => { + if (!inputDir) { + console.error('Error: Missing -i argument (input directory)\n'); + return; + } + + if (!outputDir) { + console.error('Error: Missing -o argument (output directory)\n'); + return; + } + const sourceDir = path.join(process.cwd(), inputDir); const watcher = chokidar.watch(sourceDir); @@ -15,6 +25,10 @@ module.exports = (inputDir, outputDir, extension) => { }); watcher.on('change', (filePath) => { - build(filePath.replace(/\\/g, '/'), outputDir, extension); + const isMjml = /\.mjml$/.test(filePath); + + if (isMjml) { + build(filePath.replace(/\\/g, '/'), outputDir, extension); + } }); };