Friday, 17 March 2017

How to use use files from multiple gulp sources in pairs?

I have the following directory structure that contains email templates that will be sent to people.

src
  super-contest
    default.html
    en.yml
    fr.yml
  newsletter
    fr.html
    fr.yml
    en.html
    en.yml
  stylesheet.css

The yml files include meta-data about the emails that is read by the email-sending service. I would like to add more data to the YML which would be added to the emails during the build step using mustache. For example, the same link might be placed multiple times in an email and I want to be able to write the URL in the yml file. So, in a pseudo-code:

For each .yml file

  • copy the file to /dist/**/*.yml directly
  • if an html file with the same name or a default.html file exists
    • pipe the html file through mustache using the yaml's data to fill the blanks
    • pipe the html through the css inliner (which loads css files automatically)
    • pipe the result to /dist/**/*.html

But I can't simply write something like this:

gulp.src('src/**/*.yml')
  .pipe(gulp.dest('dist'))
  .pipe(???)

gulp.src('src/**/*.html')
  .pipe(mustache(data))
  .pipe(cssInline())
  .pipe(gulp.dest('dist'))

Since I need to pipe data read from the yml into the mustache function. I'm not familiar enough with gulp and streams to do this it seems.



via Jacque Goupil

No comments:

Post a Comment