Doesn't re-compile templates when watching

[MarcPorciuncula]

I'm using gulp-marko to dynamically generate a static set of webpages. Usually marko is meant for serving pages on a webserver so by default it doesn't check for template changes on each render, which is efficient in a production environment.

Because of this I cannot just watch for changes and re-render my pages because the templates are not updated. Instead I have to run the gulp task each time I make a change, making developing a slower process and livereload an impossibility.

Is there any way I can force gulp marko to recompile templates every time I call for a render? I know there's a 'marko/hot-reload' module that watches for template changes and recompiled them but I wasn't sure how to hook that up to gulp myself.

Thanks.

[zwhitchcox]

Yes!! Having this problem too! except I can't even get it to work with my task

[zwhitchcox]

Took me 4 hours to figure this out.

[taurni]

Can you share the solution?

[zwhitchcox]

Oh, I didn't figure it out. It took me that long to figure the task was the problem. I ended up switching to jade.

[taurni]

Well I found this: https://gitter.im/marko-js/marko/archives/2015/10/22 and my Gulp file with Browser sync seems to work fine

var gulp = require('gulp');
var gulpLoadPlugins = require('gulp-load-plugins');
var bs = require('browser-sync').create();
var through = require('through2');
var merge = require('merge-stream');

var $ = gulpLoadPlugins();
var RELOAD = bs.reload;

var src = {
    html:   'app/*.html',
    marko:  'app/*.marko'
};
var dir ={
    app:            "./app",
    browserSync:    "./app",
    marko:          "./app"
};

gulp.task('serve', ['marko'], function(){
    bs.init({
        server: {
            baseDir: dir.browserSync
        }
    });
    gulp.watch(src.html).on('change', RELOAD);
    gulp.watch(src.marko, ['marko']);
});

gulp.task('watcher',function(){
    gulp.watch('app/*.marko', ['marko']);
});

/** Marko hotreloader for auto combileing
 *  https://gitter.im/marko-js/marko/archives/2015/10/22
 *  ---------------------------------------------------- *
 *  TODO: compile only changed files!
**/
require('marko/hot-reload').enable();
gulp.task('marko',function(){
    var reload = gulp.src(src.marko)
        .pipe(through.obj(function (file, enc, cb) {
            require('marko/hot-reload').handleFileModified(file.path);
            cb(null, file);
        }));

    var build = gulp.src(src.marko)
        .pipe($.marko({
            renderParams: {
                title: 'Hello Marko'
            }
        }))
        .pipe($.debug({title: 'MARKO-out:'}))
        .pipe(gulp.dest(dir.marko));

    return merge(reload,build);
});