Inheritance files not processed

djedlajn commented 7 years ago

Hi,

Here is my setup, image for your convenience.

2017-03-21

This is after compiling pug to html works as expected its just that changing partial does not trigger change.

2017-03-21 2

Here is the JS file dedicated to compiling pug to html.

gulp.task('pug', function () {
    return gulp.src(config.src) // same as ('./app/**/*.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
        .pipe(gulpif(global.isWatching, cached('pug')))

        //find files that depend on the files that have changed
        .pipe(pugInheritance({
            basedir: 'app',
            skip: 'node_modules'
        }))

        //filter out partials (folders and files starting with "_" )
        .pipe(filter(function (file) {
            // Added views to exclude folder from building.
            return !/\/_/.test(file.path) && !/^_/.test(file.relative) && !/views/.test(file.relative);
        }))

        //process jade templates
        .pipe(pug({
            pretty: true
        }))

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

gulp.task('setWatch', function () {
    global.isWatching = true;
});

I have added views folder to be treated as partials because everything inside is meant to be partial. I did try with _ naming still wont trigger build on compile change.

Here is watch file.


gulp.task('watch', ['setWatch', 'pug'], () => {
    gulp.watch(config.styles, ['styles']); // Same as ('./app/css/**')
    gulp.watch(config.pug, ['pug']); // Same as ('./app/**/*.pug')
});

Here is the config file just in case.

const src = './app'
const dest = './dist'

module.exports = {
    styles: {
        src: `${src}/css/**/*.{sass,scss}`,
        dest: `${dest}/css/`
    },
    pug: {
        src: `${src}/**/*.pug`,
        dest: `${dest}/`
    },
    clean: {
        all: dest,
        styles: `${dest}/css/**`,
        pug: `${dest}/**/.html`
    },
    watch: {
        styles: `${src}/css/**/*.{scss,sass}`,
        pug: `${src}/**/*.pug`
    }
};

It compiles but when i change block pug file it does not trigger compile or detects change whatsoever. What am i missing ? For files to detect change i need to stop watch process delete files from dist run it again and then only it picks up.

Any help would be appreciated.

pure180 commented 7 years ago

Can you please add gulb-debug to your task, like in this gulpfile.js and post the result of the terminal?

Please also add a log to gulp-filter, to see the file path that you are filtering on.

...
.pipe(filter(function (file) {
   // Added views to exclude folder from building.
   console.log(file.relative);
   return !/\/_/.test(file.path) && !/^_/.test(file.relative) && !/views/.test(file.relative);
}))
...

djedlajn commented 7 years ago

I think i found what is causing the issue. It is the subtle change in jade/pug api from v1 to v2

In Pug v1, if no file extension is given, .pug is automatically appended to the file name, but in Pug v2 this is behavior is deprecated. Link

It is really subtle, but it appears to have fixed includes not being detected. Will test more and be back with updates.

Edit: For plugin to pickup changes correctly on v2 version of API appending .pug extension to includes is required.

<!DOCTYPE html>
html(lang="en")
// Include needs to have .pug extension !
include views/_block.pug 

body
    .test
        h1

pure180 commented 7 years ago

By setting the default file extension, like described in the readme to gulp-pug-inheritance will fix this too. Will close this issue, you can write here if you still facing issues.

Grawl commented 7 years ago

Have the same issue but with an error:

2017-05-02 14:59 gulp[1416] (FSEvents.framework) FSEventStreamFlushSync(): failed assertion '(SInt64)last_id > 0LL'

It's only on included files.

Root files are compiled one-by-one, as expected.

gulpfile

```js … const $ = gulpLoadPlugins() const bs = browsersync.create() gulp.task('views', () => { bs.notify('Compiling HTML…', 999999) return gulp.src(['app/*.pug', 'app/views/**/*.pug']) .pipe($.changed('.tmp', { extension: '.html' })) .pipe($.if(global.isWatching, $.cached('pug'))) .pipe($.pugInheritance({ basedir: 'app', extension: '.pug', skip: ['node_modules'], })) .pipe($.filter(function (file) { // Added views to exclude folder from building. console.log(file.relative) return !/\/_/.test(file.path) && !/^_/.test(file.relative) && !/views/.test(file.relative) })) .pipe($.pug({ pretty: true })) .pipe(gulp.dest('.tmp')) .pipe(bs.reload({ stream: true })) }) … gulp.task('serve', () => { global.isWatching = true runSequence(['clean'], ['views', 'styles', 'scripts'], () => { … gulp.watch( [ 'app/**/*.pug', 'app/includes/**/*', ], ['views'] ) … }) }) ```

Grawl commented 7 years ago

Oops looks like my problem is in Node itself: https://github.com/nodejs/node/issues/854

pure180 / gulp-pug-inheritance

Inheritance files not processed #5