Reverse Workflow

[Nathan Farrar]

I apologize if this is a poor question (new gulp user, no experience with Lo-Dash).

I was trying to get started with gulp-template, but couldn't figure out how to utilize it in my use-case - it seems like I'm potentially trying to "do things backwards". I ended up finding a working solution with gulp-header and gulp-footer, but it's not very flexible and I'd like to implement better templating. Here's my use-case:

var fs     = require('fs');
var gulp   = require('gulp');
var gutil  = require('gulp-util');
var tap    = require('gulp-tap');
var header = require('gulp-header');
var footer = require('gulp-footer');
var concat = require('gulp-concat');
var fm     = require('gulp-front-matter');
var marked = require('gulp-markdown');

// Build a single index.html from a glob of markdown files, specifically for use with impressjs.
gulp.task('build:index', function (callback) {

  // Parse a glob of markdown files.
  gulp.src(src + '/markup/**/*.md')

    // Strip the frontmatter - it gets shoved into file.fm['...']
    .pipe(fm ({property: 'fm', remove: true}))

    // Expose file.fm['..'] variables generated by gulp-front-matter using gulp-tap.
    // Because we don't want to write empty tags if the values aren't defined, we
    // set default variables that initialize the entire tag attribute.
    .pipe(tap(function(file, t) {
      slide_id = file.fm['id']==undefined ? '' : 'id="' + file.fm['id'] + '"'
      slide_class = file.fm['class']==undefined ? '' : 'class="' + file.fm['class'] + '"'
      slide_properties  = file.fm['properties']
    }))

    // Generate html from the remaining markdown.
    .pipe(marked())

    // Wrap the markup in div tags, generated from the frontmatter.
    // If the variables are not defined, an error is not generated, they simply are not
    // written. Perfect behavior for my use case, but probably should be more explicit.
    .pipe(header('<div <%= slide_id %> <%= slide_class %> <%= slide_properties %>>\n'))
    .pipe(footer('</div>\n'))

    // Concatenate all the html into a single file.
    .pipe(concat('index.html'))

    // Wrap the generating html in our impressjs header and footer.
    .pipe(header(fs.readFileSync('src/templates/impress-header.tpl', 'utf8')))
    .pipe(footer(fs.readFileSync('src/templates/impress-footer.tpl', 'utf8')))

    // Write the index file.
    .pipe(gulp.dest(dist))

    // Fill up our logs.
    gutil.log('Recompiled index.html')
});

So all of the included examples all follow the sample basic pattern:

1. The pipeline source is the template
2. Some variables are generated in the pipeline
3. The variables are applied to the template
4. An output file is written.

In my case, the src is a glob of files that I'm parsing, and the pipeline contains content I want to keep. As a new gulp user, I don't know how to make that logic work with gulp-template - as my logic seems backwards from the use-cases presented for gulp-template in the examples.

Do you have any suggestions?
Thanks!

[Sindre Sorhus]

Support questions are better asked on StackOverflow:
http://stackoverflow.com/questions/tagged/gulp
Paste in the link to the question here so others can follow ;)