Upgrade to babel 4 seems to do the trick

Author: iRyusa

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "printWidth": 100,
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "all"
+}

gulpfile.babel.js

@@ -13,13 +13,14 @@ const walkSync = (dir, filelist = []) => {
       ? walkSync(path.join(dir, file), filelist)
       : filelist.concat(path.join(dir, file))
   })
- return filelist
+  return filelist
 }
 
 const watchedComponents = walkSync('./components')
 
 const compile = () => {
-  gulp.src(path.normalize('components/**/*.js'))
+  return gulp
+    .src(path.normalize('components/**/*.js'))
     .pipe(babel())
     .on('error', log)
     .pipe(gulp.dest('lib'))
@@ -42,8 +43,5 @@ gulp.task('build', compile)
 
 gulp.task('watch', () => {
   compile()
-  return watch([
-    path.normalize('components/**/*.js'),
-    path.normalize('index.mjml'),
-  ], compile)
+  return watch([path.normalize('components/**/*.js'), path.normalize('index.mjml')], compile)
 })

index.mjml

@@ -12,7 +12,7 @@
 
     <!-- The second component, mj-image-text renders as a section -->
     <mj-image-text background-color="#DD685B" image-src="https://mjml.io/assets/img/mjml-logo.png" image-width="100px" font-size="24px" image-position="left">
-      MJML rules!
+      MJML rules! hello modified
     </mj-image-text>
 
     <!-- The third component, mj-layout, also renders as a section -->
@@ -23,4 +23,4 @@
     </mj-layout>
 
   </mj-body>
-</mjml>
+</mjml>