Failing Silently with a lot of pug files

[bhardy]

I'm very close to getting this working properly, but I'm having an issue I can't quite troubleshoot. I'm not sure if it's a bug or if I'm making a mistake with my implementation.

If I set my watch to pipe in my /views/pages directory everything works correct, except if I modify something in my /_partials or _/layout directory I obviously won't get the related files re-compiled. If I change the path to pipe in /views (equivalent to your example) pugInheritance will fail silently.

I've dropped gulp-debugs all over the place and it looks like my changed and cache aren't filtering anything out before it gets to pugInheritance when I'm watching all the pug files. We've got 250 pug files, so I'm thinking that might be the issue.

I'm not sure if I'm missing something obvious here. Please advice. Thanks in advance.

Here's my directory structure

/app/views/_layouts
/app/views/_partials
/app/views/pages
---
/public/

Layouts and partials are just extends and includes, while pages is all of the pug files that need to be compiled.

Here's the related code from my gulpfile.

let destPath = path.join(__dirname, 'public');

gulp.task('watch-html', gulp.series('merge-json', () => {
  return gulp.src([
      'app/views/**/*.pug'
    ])
    .pipe(changed(destPath, {extension: '.html'}))
    .pipe(cache('pug'))
    .pipe(pugInheritance({basedir: path.join(__dirname, 'app', 'views'), skip: 'node_modules'}))
    .pipe(filter(function (file) {
      return !/\/_/.test(file.path) && !/^_/.test(file.relative);
    }))
    .pipe(flatten({ subPath: [1]} ))
    .pipe(pug({
      basedir: path.join(__dirname, 'app', 'views'),
      locals: global.pugLocals
    }))
    .pipe(gulp.dest(destPath))
}));

gulp.task('watch', () => {
  gulp.watch([
    'app/views/**/*.pug'
  ], gulp.parallel('watch-html'))
});

[pure180]

It doesn't look like that there is any mistake in your gulp task. You can compare your task with my example repository. https://github.com/pure180/gulp-pug-inheritance-test

But if you have many files that will be compiled it can take a while till the task is ready without notifying. pug-inheritance loops true each file every time your task is starting to render a new file. I'm working on a beta version that prevents exactly this problem by writing the inheritance tree into a cache file. You can give it a try and see if your task ist working. Install the RC with npm install gulp-pug-inheritance@1.0.0-rc.4 and follow the instuction from this readme. Let me know if you need help.

[bhardy]

I've let the thing run for a few minutes and it doesn't seem to get anywhere, but maybe I'll just leave it up indefinitely and see what happens. I'll try the beta right after that. Thanks!

[bhardy]

I've switched to the beta. Here are my discoveries:

1. The initial watch with 250 pug files takes ~15 minutes.
2. If I remove a file from the project that is tracked in my temp file pugInheritance will error out on line 224 in index.js
3. After the temp file is created, watching is VERY fast! Nice
4. Unfortunately includes don't seem to work, while extends do.

Here's my debug logs for this issue (partials are includes, while layouts are extends):

[11:34:16] Starting 'watch-html'...
[11:34:16] Starting 'merge-json'...
[11:34:17] Finished 'merge-json' after 251 ms
[11:34:17] Starting '<anonymous>'...
[11:34:17] debug-before 1 item
[11:34:17] [gulp-pug-inheritance] Plugin already started once. Get inheritances from a tempfile
[11:34:17] [gulp-pug-inheritance][CACHED] Get inheritance of: "_partials/marketing/product-signup.pug" - 17ms
[11:34:17] debug-after 1 item
[11:34:17] debug-after-filter 0 items
[11:34:17] Finished '<anonymous>' after 253 ms
[11:34:17] Finished 'watch-html' after 505 ms

[11:35:06] Starting 'watch-html'...
[11:35:06] Starting 'merge-json'...
[11:35:06] Finished 'merge-json' after 215 ms
[11:35:06] Starting '<anonymous>'...
[11:35:06] debug-before 1 item
[11:35:06] [gulp-pug-inheritance] Plugin already started once. Get inheritances from a tempfile
[11:35:06] [gulp-pug-inheritance][CACHED] Get inheritance of: "_layouts/marketing.pug" - 18ms
[11:35:14] debug-after 38 items
[11:35:14] debug-after-filter 33 items

You can see that gulp-pug-inheritance isn't returning any linked files for the include. I have tried moving this partial into my layout directory to make sure there isn't an issue with my folder hierarchy and the same issue occurs. I've also checked the temp file and many files do list the partial from the example in their dependencies.

[pure180]

Well that this tool can crash is normal while it is in beta. But I'm not facing any of this issues. For me it is working fine and I'm working with it almost 6 days a week ;-) Can you please provide more information about your system like OS, npm, nodjs, pug/jade, gulp version, also post your npm debug log here. Best would be if you have an opensource repo with your code.

How do include the files in your pug files, are you using the file extension? The basedir in the setting should also be a relative path to your project, something like src/pug and not /home/username/project/src/pug, if your pug files are in the same directory as node_modules folder you should set the skip setting.

Hope I can help you!

[librisius]

Looks like I have the same problem.

[pure180]

Sorry for the late respond. Well, it is hard to reproduce yor error, please provide me all informations i askedfor in my previous post. I can have a closer look on it then, thanks.

[alexisreina]

I had the same issue. Changes in _partials don't trigger anything. I managed to get them working disabling cached plugin.

// Templates
gulp.task('pug', function() {
    return gulp.src('./app/templates/**/*.pug')
        //only pass unchanged *main* files and *all* the _partials/
        .pipe($.changed('dist', { extension: '.html' }))

        //filter out unchanged _partials/, but it only works when watching
        // cached is making _partials not being updated the second time they run
        //.pipe($.if(global.isWatching, $.cached('pug')))

        //find files that depend on the files that have changed
        .pipe($.pugInheritance({basedir: './app/templates', saveInTempFile: true}))

        //filter out _partials/ (folders and files starting with "_" )
        .pipe($.filter(function (file) {
            return !/\/_/.test(file.path) && !/^_/.test(file.relative);
        }))

        //process jade templates
        .pipe($.pug({ pretty: true, data: requireUncached('./app/data/data') }))

        //handle errors
        .on('error', function (err) { console.error(err); this.emit('end')  })

        //save all the files
        .pipe(gulp.dest('dist'));
});

[alexisreina]

Edit: it seems that is due using the extension in the includes

I managed to make it work. Don't ask me how or why but I did this:

• Rename partials to camelCase and avoid names with slash.
• Add the pug extension to all includes.
• Delete the temp file.

e.g

before: include _includes/site-nav

after: include _includes/siteNav.pug

Worked for me

[jonikss]

Rename partials to camelCase and avoid names with slash. Add the pug extension to all includes. Delete the temp file.

After this manipulation its work. It is bag!