mjmlio / gulp-mjml Goto Github PK

As noted in #8 (comment) mj-include doesn't work with relative paths.

I see a PR where filePath is set on an object for includes, but I am not sure if it's used: https://github.com/mjmlio/gulp-mjml/pull/19/files#r130280996

Maybe the options sent into mjml2html should be localOptions instead?

Edit: I see there is an open PR for this #25

It would be great to be able to use MJML's built-in minify option, unless using another minifier (like gulp-htmlmin) is OK, in a matter of compatibility with email clients. But i'm not sure about what options to set.

Hi I'm trying something out with mj-html-attributes and it is not working. It does nothing however when i just run my files via
mjml [input] -o [output]

I get the following:

No matching component for tag : mj-html-attributes
... (mj-html-attributes) — Element mj-html-attributes doesn't exist or is not registered
... (mj-selector) — Element mj-selector doesn't exist or is not registered

I have the following mjml file

<mjml> 
  <mj-body>
    <mj-container>
      <mj-section>
          <mj-column>
            <mj-text>
                WTF
            </mj-text>
          </mj-column>
      </mj-section>
    </mj-container>
  </mj-body>
</mjml>

Using the following mjml-cli, I get

mjml test.mjml -o test.html

<div class="" style="cursor:auto;color:#000000;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:22px;text-align:left;">WTF</div>

Using gulp-mjml with the following task settings, I get

gulp.task("mjml", function () {
  var mjmlSrc = jsRoot + "/mjml/templates/**/*.mjml";
  return gulp.src(mjmlSrc)
    .pipe(mjml())
    .pipe(gulp.dest(jsRoot + "/mjml/build"));
});

<div class="" style="cursor:auto;color:#000000;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:22px;text-align:left;"><!--[CDATA[
                WTF
            ]]--></div>

The <!--[CDATA[WTF]]--> output does not display the text in any email clients I've tested using emailonacid.

Node version: v7.4.0
Mjml version: 3.3.2
gulp-mjml version: 2.2.0

I am using gulp-mjml v3.0.0 on Mac, with Node v8.11.1.
I was trying to setup MJML and used the try it live template from: https://mjml.io/try-it-live

Entry file

<mjml>
  <mj-body>
    <mj-section>
      <mj-column>

        <mj-image width="100" src="/assets/img/logo-small.png"></mj-image>

        <mj-divider border-color="#F45E43"></mj-divider>

        <mj-text font-size="20px" color="#F45E43" font-family="helvetica">Hello World</mj-text>

      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

Expected Behavior

The template renders just as expected, see: https://mjml.io/try-it-live

Actual Behavior

The template renders entirely empty, no hello world, no logo, no divider. Just some html with empty divs.

Steps to Reproduce

Just run it 😉

Sometimes I've got errors about building my mjml templates, but I've got no error from gulp-mjml.

How to catch and display these errors?

Using gulp-mjml v1.0.1 and mjml 2.3.3 wraps all of the text in tags in CDATA tags twice, but only the outer of those tags is removed after rendering.

The code

[_mjmlButton2.default, _mjmlColumn2.default, _mjmlContainer2.default, _mjmlDivider2.default, _mjmlGroup2.default, Hero, HeroContent, _mjmlHtml2.default, _mjmlImage2.default, InlineLinks, Invoice, InvoiceItem, Link, _mjmlList2.default, _mjmlLocation2.default, Navbar, _mjmlRaw2.default, _mjmlSection2.default, _mjmlSocial2.default, _mjmlSpacer2.default, _mjmlTable2.default, _mjmlText2.default].map(_mjmlCore.registerMJElement);

is run twice; once for the default mjml engine in gulp-mjml, and once for my custom engine. This causes the rendering engine of either instance to loop over each of those types of components twice, wrapping the inner contents in two CDATA tags.

I have an example here.

How do you emit validation warnings with the gulp-mjml that is similar to what you get when you run

mjml -w file.mjml

Hello!

Is it possible MJML version to the last release?
There are plenty of fixes and new features.

Thank you

Hi,

When running NPM install I get the following warning:

npm WARN deprecated [email protected]: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5

So I've run npm ls gulp-util to get the list of plugins dependent on it, here is the result:

But on my package.json I have only the following:

"devDependencies": {
    "gulp": "4.0.2",
    "gulp-mjml": "3.0.0",
    "mjml": "4.4.0-beta"
}

I guess it's because actual gulp-mjml 3 NPM release still use gulp3:

Whereas the actual master branch of gulp-mjml use gulp4:

Can you release a new NPM version to fix that?

Thank you

Hi, first thanks for the work.

I'm getting:

Starting 'mjml'...
fs.js:584
return binding.open(pathModule._makeLong(path), stringToFlags(flags), mode);
^

Error: ENOENT: no such file or directory, open './header.mjml'
at Error (native)
at Object.fs.openSync (fs.js:584:18)
at Object.fs.readFileSync (fs.js:431:33)
at /home/martin/vagrants/scotch/public/posada/node_modules/mjml-core/lib/includeExternal.js:25:33

In my mjml template I have:

Node version: v5.12.0

If you need more info just tell me. thanks

Mjml is on v4.0.0 but this package is on v4.0.0.
Any plan to upgrade?

Are you planing to update MJML to the latest version?

Would it be possible to bump the version of MJML used in this to the latest release?

v2.1.0 is not updated on npm.
Sorry if this is just part of the release flow - just thought I'd report.

Hi, Thanks for this awesome plugin which worked very good for the v3 versions however when upgrading to v4 I have some issues. The output created with the gulp-mjml is lacking almost all elements that it should contain. When using the cli mjml input.mjml -o output.html it creates the correct HTML.

mjml: v4.1.2
gulp-mjml: 3.0.0

When running following task:

gulp.task("mjml", () =>
	gulp
		.src(`${paths.src}**/*.mjml`)
		.pipe(mjml())
		.pipe(gulp.dest(paths.dist))
);

I receive the following errors:

[17:03:44] Starting 'mjml'...
No matching component for tag : mj-title
No matching component for tag : mj-preview
No matching component for tag : mj-font
No matching component for tag : mj-style
[17:03:44] Finished 'mjml' after 55 ms

View the Input MJML

View the Output HTML (via gulp-mjml)

View the Output HTML (via cli)

The plug-in is great but it only supports the MJML file already being present on disc so they they can be processed.

This means that if I have a gulp pipeline where the MJML file contents have been streamed in then it will not support that.

Would it be possible to add support for reading the MJML contents from the stream? I am happy to open a PR if this is something this project would be willing to support.

Suddenly after reinstalling npm modules we get this error:

TypeError: must start with number, buffer, array or string`

We traced it to this line:

output.contents = new Buffer(mjmlEngine.mjml2html(file.contents.toString()));

Changing it to this makes it work:

output.contents = new Buffer(JSON.stringify(mjmlEngine.mjml2html(file.contents.toString())));

Having problems with the new changes for relative URLs in mj-inlcude tags. Compiling with the MJML commandline tool works but when using gulp-mjml we get the error:

Error: ENOENT: no such file or directory, open '../freemarker/mjml/ommon/Attributes.mjml'
at Object.fs.openSync (fs.js:646:18)
at Object.fs.readFileSync (fs.js:551:33)
at checkIncludeHash (/Users/dean/Documents/Workspace/bobe/build/gulpfile.js:447:29)
at /Users/dean/Documents/Workspace/bobe/build/gulpfile.js:393:24
at DestroyableTransform.modifyFile [as _transform] (/Users/dean/Documents/Workspace/bobe/node_modules/gulp-tap/lib/tap.js:53:11)
at DestroyableTransform.Transform._read (/Users/dean/Documents/Workspace/bobe/node_modules/readable-stream/lib/_stream_transform.js:182:10)
at DestroyableTransform.Transform._write (/Users/dean/Documents/Workspace/bobe/node_modules/readable-stream/lib/_stream_transform.js:170:83)
at doWrite (/Users/dean/Documents/Workspace/bobe/node_modules/readable-stream/lib/_stream_writable.js:406:64)
at writeOrBuffer (/Users/dean/Documents/Workspace/bobe/node_modules/readable-stream/lib/_stream_writable.js:395:5)
at DestroyableTransform.Writable.write (/Users/dean/Documents/Workspace/bobe/node_modules/readable-stream/lib/_stream_writable.js:322:11)

When we use the tag:

<mj-include path="../common/Attributes.mjml" />

I am trying to set fileExt to .email but the files are still getting output as .html After digging through the code, I found that this line is reflecting a different value. Instead, what I am seeing is: output.path = replaceExt(file.path.toString(), ".html");

Has the npm package been updated to reflect the latest changes?

With the new 4.0.0 version get this error when declaring gulp-mjml on Node 12.4.0

const mjml = require('gulp-mjml');

Error:

/node_modules/gulp-mjml/src/index.js:39
const render;
^^^^^^

SyntaxError: Missing initializer in const declaration
at Module._compile (internal/modules/cjs/loader.js:718:23)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:785:10)
at Module.load (internal/modules/cjs/loader.js:641:32)
at Function.Module._load (internal/modules/cjs/loader.js:556:12)
at Module.require (internal/modules/cjs/loader.js:681:19)
at require (internal/modules/cjs/helpers.js:16:16)
at Object. (/gulpfile.js:26:9)
at Module._compile (internal/modules/cjs/loader.js:774:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:785:10)
at Module.load (internal/modules/cjs/loader.js:641:32)

Hi there,

Noticed a bunch of security vulnerabilities within gulp-mjml. Most seem related to the version of lodash being used in the mjml package gulp-mjml uses. Possible to bump the versions of lodash referenced within the various mjml modules?

Example warning:

┌───────────────┬──────────────────────────────────────────────────────────────┐
│ High          │ Lodash Package for Node.js .internal/baseZipObject.js        │
│               │ baseZipObject() Function Property Manipulation Resource      │
│               │ Exhaustion DoS                                               │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ lodash                                                       │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │                                                              │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ gulp-mjml [dev]                                              │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ gulp-mjml > mjml > mjml-section > mjml-core >                │
│               │ mjml-parser-xml > lodash                                     │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://vulndb.cyberriskanalytics.com/vulnerabilities/228535 │
└───────────────┴──────────────────────────────────────────────────────────────┘

Edit
Looks like the security warnings are coming from the mjml lib itself. Will check with them.

Edit 2
More research shows this is being addressed by the lodash team. See the following issue and PRs:
https://github.com/lodash/lodash/issues/4775
lodash/lodash#4745
lodash/lodash#4759

There's an option on the Try it Live page to minify the HTML. It certainly seems to change things a bit, but the HTML is still full of whitespace, and doesn't look as though it's been scrunched up anything like as much as I'd expect (e.g. using https://www.willpeavy.com/minifier/).

I can use another minifier, but I wanted to check in case there are subtleties of minification in HTML emails which might mean that more aggressive minification breaks things?

Usecase: don't crash gulp.watch on errors.

I suppose it should not throw, but it should emit error instead. Then error could be caught by a wrapper that will display it to the user.

Steps to reproduce:

// gulpfile.js
var gulp = require('gulp');
var mjml = require('gulp-mjml')

gulp.task('build', function () {
  gulp.src('./*.mjml')
    .pipe(mjml())
    .pipe(gulp.dest('./html'))
});

gulp.task('watch', function () {
  return gulp.watch('./*.mjml', ['build'])
})

And mjml file with syntax error:

<mjml>

The version of mjml used in this plugin has bugs such as mj-column overriding the width of an mj-image inside it. I had to switch to the cli utility, no success either running as an mjml engine.

This is how I defined my gulp task

gulp.task('default', () => {
    return gulp.src('./src/**/*.mjml')
        .pipe(mjml(null, {minify: true}))
        .on('error', e => console.log(e))
        .pipe(gulp.dest('./build'))

When running it I get this warning

"minify" option is deprecated in mjml-core and only available in mjml cli.

I suspect upgrading the mjml dependency to 4.8.x may fix it because of mjmlio/mjml#2059

I will open that PR after testing.

Could you please update package.json to use mjml 3.3.0, since I see that there are some bugfixes in those latest minor releases (https://github.com/mjmlio/mjml/releases/tag/3.3.0)

Hi, I'm new to mjml and I'm trying to setup gulp. I've installed the plugin and added code in my gulpfile so that gulp watches for any changes to .mjml files

  return src(source, { base: "./" })
    .pipe(mjml())
    .on("error", reportError)
    .pipe(gulp.dest("."));

When I update a .mjml file, gulp does detect the changes and compiles the template but only once. When I make another change and hit save, nothing happens.

Any ideas what could be going on?

At the moment it is not possible to use MJML options (minify, beautify ...) using gulp.

Hello gulp-mjml users,

I've forked gulp-mjml to update it for the latest MJML versions. The updated fork is available at https://www.npmjs.com/package/@gmirmand/gulp-mjml. While I won't be maintaining this actively, I'm open to reviewing and merging pull requests to keep the package updated.

Feel free to contribute at https://github.com/gmirmand/gulp-mjml.

Have a good day

Getting this error

18:39:34] Using gulpfile ~/my-projects/mjmlgulp/gulpfile.js
[18:39:34] Starting 'default'...
[18:39:34] Finished 'default' after 8.8 ms
/Users/jitendravyas/my-projects/mjmlgulp/node_modules/gulp-mjml/node_modules/mjml/node_modules/mjml-core/lib/decorators/MJMLElement.js:162
          var childProps = Object.assign({}, child.props);
                                  ^
TypeError: undefined is not a function
    at /Users/jitendravyas/my-projects/mjmlgulp/node_modules/gulp-mjml/node_modules/mjml/node_modules/mjml-core/lib/decorators/MJMLElement.js:162:35
    at Array.forEach (native)
    at MJMLElement._this.renderWrappedOutlookChildren (/Users/jitendravyas/my-projects/mjmlgulp/node_modules/gulp-mjml/node_modules/mjml/node_modules/mjml-core/lib/decorators/MJMLElement.js:161:18)
    at Container.render (/Users/jitendravyas/my-projects/mjmlgulp/node_modules/gulp-mjml/node_modules/mjml/node_modules/mjml-container/lib/index.js:114:9)
    at ReactCompositeComponentMixin._renderValidatedComponentWithoutOwnerOrContext (/Users/jitendravyas/my-projects/mjmlgulp/node_modules/gulp-mjml/node_modules/mjml/node_modules/mjml-core/node_modules/react/lib/ReactCompositeComponent.js:687:34)
    at ReactCompositeComponentMixin._renderValidatedComponent (/Users/jitendravyas/my-projects/mjmlgulp/node_modules/gulp-mjml/node_modules/mjml/node_modules/mjml-core/node_modules/react/lib/ReactCompositeComponent.js:707:32)
    at wrapper [as _renderValidatedComponent] (/Users/jitendravyas/my-projects/mjmlgulp/node_modules/gulp-mjml/node_modules/mjml/node_modules/mjml-core/node_modules/react/lib/ReactPerf.js:66:21)
    at ReactCompositeComponentMixin.performInitialMount (/Users/jitendravyas/my-projects/mjmlgulp/node_modules/gulp-mjml/node_modules/mjml/node_modules/mjml-core/node_modules/react/lib/ReactCompositeComponent.js:291:30)
    at ReactCompositeComponentMixin.mountComponent (/Users/jitendravyas/my-projects/mjmlgulp/node_modules/gulp-mjml/node_modules/mjml/node_modules/mjml-core/node_modules/react/lib/ReactCompositeComponent.js:222:21)
    at wrapper [as mountComponent] (/Users/jitendravyas/my-projects/mjmlgulp/node_modules/gulp-mjml/node_modules/mjml/node_modules/mjml-core/node_modules/react/lib/ReactPerf.js:66:21)

Gulpfile

var gulp = require('gulp');
var mjml = require('gulp-mjml')

gulp.task('default', function () {
  gulp.src('./index.mjml')
    .pipe(mjml())
    .pipe(gulp.dest('./html'))
});

index.mjml

<mjml>
  <mj-body>
    <mj-container>
      <mj-section>
        <mj-column>

          <mj-text font-size="20px" color="#F45E43" font-family="helvetica" align="center">Hello World</mj-text>
          <mj-divider border-color="#F45E43"></mj-divider>
          <mj-text font-size="16px" color="blue" font-family="helvetica">More text</mj-text>

        </mj-column>
      </mj-section>
    </mj-container>
  </mj-body>
</mjml>

Steps to reproduce :

• https://github.com/coreybutler/nvm-windows
• node v7.0.0
• npm 3.10.8
• "mjml": "3.2.2"
• "gulp": "3.9.1"
• "gulp-mjml": "1.0.1"
• contents of gulpfile.js : see below
• run gulp

var gulp = require('gulp');
var mjml = require('gulp-mjml');

gulp.task('build', function () {
  gulp.src(['./src/**/*.mjml'])
    .pipe(mjml())
    .pipe(gulp.dest('./build'));
});

gulp.task('default', function () {
  gulp.watch('./src/**/*.mjml', ['build']);
});

Full error console output :

[15:42:02] Starting 'default'...
[15:42:02] Finished 'default' after 13 ms
[15:42:10] Starting 'build'...
[15:42:10] Finished 'build' after 17 ms
buffer.js:284
  throw new TypeError(kFromErrorMsg);
  ^

TypeError: First argument must be a string, Buffer, ArrayBuffer, Array, or array-like object.
    at fromObject (buffer.js:284:9)
    at Function.Buffer.from (buffer.js:116:10)
    at new Buffer (buffer.js:95:17)
    at DestroyableTransform._transform (node_modules\gulp-mjml\src\index.js:23:22)
    at DestroyableTransform.Transform._read (node_modules\readable-stream\lib\_stream_transform.js:159:10)
    at DestroyableTransform.Transform._write (node_modules\readable-stream\lib\_stream_transform.js:147:83)
    at doWrite (node_modules\readable-stream\lib\_stream_writable.js:347:64)
    at writeOrBuffer (node_modules\readable-stream\lib\_stream_writable.js:336:5)
    at DestroyableTransform.Writable.write (node_modules\readable-stream\lib\_stream_writable.js:274:11)
    at write (node_modules\vinyl-fs\node_modules\readable-stream\lib\_stream_readable.js:623:24)

Would be super helpful if there was an option to choose an output file extension other than html. I am creating handlebars files from mjml and VSCode treats them differently when the file extension is html instead of hbs

Gulp is not needed as a dependency when running this plugin. Move it to devDependencies to avoid users having to install a new gulp when they install your package. This is also in accordance to item 14 in the plugin guidelines.

Using a gulp task that was working fine up until I updated to MJML 4.2.0. Now I receive the following error if I keep 4.2 in the project

events.js:167
      throw er; // Unhandled 'error' event
      ^
Error: Error in file mjml/email.mjml: mjmlEngine is not a function
The terminal process terminated with exit code: 1

gulp.js looks likes this

var gulp = require('gulp');
var mjmlEngine = require('mjml');
var mjml = require('gulp-mjml');

gulp.task('html', function(){
    gulp.src('mjml/*.mjml')
        .pipe(mjml(mjmlEngine, {minify: true}))
        .pipe(gulp.dest('./output'))
})

From @iRyusa's comment here it seems like you guys setup MJML validation. Could we use that with gulp-mjml?