Filtering partials with watch in Gulp

[Tim Kelty]

In my views folder, I have a folders that start with _ that contain partials, that I'm filtering out from rendering:

var views = path.join(config.paths.src, 'views');
var src = [
  path.join(views, '**/*.html'),
  '!' + path.join(views, '_*/*'),
];
nunjucksRender.nunjucks.configure(
  [views],
  { watch: false }
);

gulp.task('build:html:render', function() {
  return gulp.src(src)
  .pipe(nunjucksRender())
  .pipe(gulp.dest(dest));
});

This works great with one exception: When I run this task from gulp.watch, it only runs when I save one of my non-underscored files, but I want it to re-render everything on any save with views.

  gulp.watch([
    path.join(config.paths.src, 'views/**/*.html'),
  ], gulp.series(
    'build:html:render'
  ));

Any ideas?

[Venkateshwar]

I am actually doing something like this to exclude "_" prefixed files. I hope it will be helpful for you:

var gulp = require('gulp');
var nunjucksRender = require('gulp-nunjucks-render');

gulp.task('default', function () {
    nunjucksRender.nunjucks.configure(['templates/']);
    return gulp.src('templates/!(_)*.html')
        .pipe(nunjucksRender({
            css_path: "../assets/css/",
            js_path: "../assets/js/",
            img_path: "../assets/images/"
        }))
        .pipe(gulp.dest('html'));
});
gulp.task('watch', function () {
    gulp.watch(['templates/*.html'], ['default']);
});

[Tim Kelty]

Yeah, that's essentially the same thing I'm doing. Both work fine when just compiling. The problem is when watching, the templates aren't re-built when you save one of the _ files, since it is filtered out of the stream.

[Venkateshwar]

I don't think the above code which I provided is not watching the files with _ prefix. The code I provided is actually watching all the files but compiling only the files which aren't prefixed with _.

[Carlito Platanito]

@kamlekar is correct, his watch gulp.watch(['templates/*.html'], ['default']); is watching all html files in the template directory, might want to add **/*.html if you have the "_" files in sub-directories though.

[Carlito Platanito]

Please close or let me know if your issue has been solved.

[Tim Kelty]

will do - testing now

[Tim Kelty]

Figured it out! I wasn't related to underscored directories at all.

I was doing nunjucksRender.nunjucks.configure outside of the gulp.task callback. As soon as I put it inside, everything works!

My bad, thanks for stickin' with me!

[Carlito Platanito]

Awesome. Closing this out.

[Michael Sables]

Hi Timkelty and kamlekar, any chance you could show me how you achieved this in the end, I need to exclude the includes folder too :)

[Tim Kelty]

@ReloadInteractive, I have:

  var nunjucksRender = require('gulp-nunjucks-render');
  var views = path.join(process.cwd(), 'views');
  var src = [
    path.join(views, '**/*.{nunj,nunjucks}'),
    '!' + path.join(views, '_*/*'),
  ];

  gulp.task('build:html', function() {
    nunjucksRender.nunjucks.configure(
      [views],
      { watch: false }
    );

    return gulp.src(src)
    .pipe(nunjucksRender())
    .pipe(gulp.dest(dest));
  });

The only confusion for me was it was important to have the nunjucksRender.nunjucks.configure inside the gulp.task callback, not outside.