foundation / panini

A super simple flat file generator.
Other
592 stars 104 forks source link

Changes to src/layouts/default.html not being reflected after panini.refresh() #137

Closed jellisii closed 6 years ago

jellisii commented 6 years ago

My directory structure:

mybox:~/project$ tree -I 'node*|_build*'
.
├── gulpfile.js
├── package.json
├── src
│   ├── helpers
│   │   └── list.js
│   ├── layouts
│   │   └── default.html
│   ├── pages
│   │   └── index.html
│   ├── partials
│   └── sass
│       └── all.scss
└── yarn.lock

gulpfile.js

var
    gulp = require('gulp'),
    sass = require('gulp-sass'),
    merge = require('merge-stream'),
    browser = require('browser-sync'),
    panini = require('panini'),
    port = process.env.SERVER_PORT || 3000,
    build_folder = './_build'
;

gulp.task('sass', [], function() {
    gulp.src('./src/sass/all.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest(build_folder + '/css'));
});

gulp.task('copy-files', ['sass'], function() {
    var
        jquery,
        foundation,
        what_input,
        motion_ui,
        dt
    ;
    jquery = gulp
        .src('./node_modules/jquery/dist/**')
        .pipe(gulp.dest(build_folder + '/vendor/jquery'))
    ;
    what_input = gulp
        .src('./node_modules/what-input/dist/**')
        .pipe(gulp.dest(build_folder + '/vendor/what-input'))
    ;
    foundation = gulp
        .src('./node_modules/foundation*/**')
        .pipe(gulp.dest(build_folder + '/vendor/'))
    ;
    motion_ui = gulp
        .src('./node_modules/motion-ui/**')
        .pipe(gulp.dest(build_folder + '/vendor/motion-ui'))
    ;
    dt = gulp
        .src('./node_modules/datatables*/**')
        .pipe(gulp.dest(build_folder + '/vendor/'))
    ;
    return merge(
        jquery,
        foundation,
        what_input,
        motion_ui,
        dt
    );
});

gulp.task('build', ['copy-files'], function() {
    gulp.src('./src/pages/**/*.html')
        .pipe(panini({
            root: 'src/pages/',
            layouts: 'src/layouts/',
            partials: 'src/partials/',
            helpers: 'src/helpers/',
            data: 'src/data/'
        }))
    .pipe(gulp.dest('_build'));
    browser.init({server: build_folder, port: port});
});

gulp.task('watch', ['sass', 'copy-files'], function() {
    gulp.watch('./src/**/*', function() {
        panini.refresh();
        browser.reload();
    });
});

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

Whenever I save changes to src/layouts/default.html, the watch task gets triggered, which in turn triggers panini.refresh(), but changes made in src/layouts/default.html aren't being reflected in the build folder. Reloading the browser does not rectify the problem as _build/index.html doesn't seem to have the changes made to src/layouts/default.html. The only way I can successfully get those changes to reflect is by restarting gulp.

I'm not using the template. yarn info panini reports version 2.0.0-alpha.2.

gakimball commented 6 years ago

Your use of panini.refresh() is correct, but you need to also re-run your build task again so the pages actually get built. Look at how it's done in the ZURB Template: https://github.com/zurb/foundation-zurb-template/blob/master/gulpfile.babel.js#L154

This is definitely confusing, and it's something I'm hoping to address with version 2.0.

jellisii commented 6 years ago

Running build does indeed fix the problem. Thank you for that guidance. :)

gakimball commented 6 years ago

No problem! :) Thanks for using Panini.