gulp-file-include and jade nesting problems

Question

I am teaching myself Gulp and am running into a problem using gulp-file-include and Jade —which relies on proper markup indentation.

gulp-file-include successfully includes the partials (for things like footers and navigation), but messes up the indentation of the jade when it included these partials. Obviously a wrongly indentated Jade file is going to produce wrongly nested HTML.

app/index.jade

body
   ul.navbar
      h1.logo
        | Logo

    .container
      | Lorem Ipsum...

    .footer
      @@include('./_footer.jade')

app/_footer.jade

.footer-content
  | hello
  a(href) my link

app/gulpfile.js

var gulp = require('gulp');
var fileinclude = require('gulp-file-include');


return gulp.src('./index.jade')
    .pipe(fileinclude({
      prefix: '@@',
      basepath: '@file'
    }))
    .pipe(gulp.dest('dist/'));
});

The output

body
  ul.navbar
    h1.logo
      | Logo

  .container
     | Lorem Ipsum...

  .footer
    .footer-content
  | hello
  a(href) my link

The @@include('./_footer.jade') is clearly nested under .footer in the code but the content of _footer.jade are rendered outside it.

If anyone has any experience using this gulp-file-include plugin with a templating language I'd be interested to hear how you solved it!

Answer 1

I have a similar [but different] problem using gulp-slim with gulp-file-include . However, I am compiling the HTML templates first with gulp, and using slim's output folder as the src HTML for gulp-file-include. This means gulp-file-include interpolates real HTML instead of the slim template.

As you can guess, indentation is no longer an issue with this approach, but I did encounter other issues I had to fix.

In slim if my code looks like:

.div-wrapper
  | @@include('./dist/templates/_header.html')
  | @@include('./dist/templates/_nav.html')

it will compile the text nodes to a single line such as:

@@include('./dist/templates/_header.html')@@include('./dist/templates/_nav.html')

gulp-file-include doesn't like the directives on the same line (I believe) and throws an error. I fixed that by placing a disposable div between them.

.div-wrapper
  | @@include('./dist/templates/_header.html')
  .delete
  | @@include('./dist/templates/_nav.html')

now the output renders the text nodes onto multiple lines and gulp-file-include correctly interpolates the partials with indentation being a non-issue.

BUT, to get that working right I had to use gulps dependency chain correctly. Meaning all tasks can't just fire at the same time, you need to explicitly make the templating language do it's thing first, and then have gulp-file-include do it's thing second.

I'm opening an issue to see if gulp-file-include can chill out with having multiple includes on the same line... because life would be much easier then.

The relevant parts of my gulpfile are:

var gulp         = require('gulp');

var fileInclude  = require('gulp-file-include');
var livereload   = require("gulp-livereload");
var prettify     = require('gulp-prettify');
var slim         = require("gulp-slim");
var watch        = require('gulp-watch');

var slimFiles = "./_pre-assets/slim/*.slim";
var slimOutput = "./dist/templates";

gulp.task('slim', function(){
  return gulp.src(slimFiles)
    .pipe(slim({
      pretty: true
    }))
    .pipe(gulp.dest(slimOutput));
});

var htmlDist = "./dist/html";
var htmlTemplates = [
  './dist/templates/home.html',
  './dist/templates/standard.html',
]

gulp.task('fileInclude', ['slim'], function(){
  return gulp.src(htmlTemplates)
    .pipe(fileInclude({
      basepath: '@root'
    }))
    .pipe(gulp.dest(htmlDist));
});

var htmlDistFiles = "./dist/html/*.html"

gulp.task('prettify', ['fileInclude'], function(){
  return gulp.src(htmlDistFiles)
    .pipe(prettify())
    .pipe(gulp.dest('./dist/html/clean'));
});

gulp.task('watch', function(){
  livereload.listen();
  gulp.watch(slimFiles, ['slim', 'fileInclude', 'prettify']);

  var watchDirs = [
    './dist/css/**',
    './dist/javascript/**',
    './dist/html/**',
  ]

  gulp.watch(watchDirs).on('change', livereload.changed);
});

gulp.task('default', ['watch']);

It could be a little cleaner but you get the idea... I'm also compiling from sass and babel and running a local server with express if it's of any interest. Sorry this code is not tested.