Static site generator for Node.js, Grunt.js, and Yeoman and Gulp. Render templates with Handlebars, Lo-Dash or any template engine. Used by Zurb Foundation, Zurb Ink, Less.js / lesscss.org, Topcoat, Web Experience Toolkit, and hundreds of other projects to build sites, themes, components, documentation, blogs and gh-pages.
gulp.task('assemble', ['config-assemble'], function (done) {
log('Assemble');
return asm.toStream('pages')
.on('error', console.log)
.pipe(asm.renderFile())
.on('error', console.log)
.pipe($.extname())
.pipe(asm.dest(config.build))
.pipe(browserSync.stream())
;
});
assemble
[23:25:10] HBS file changed:/src/html/partials/menu.hbs
[Browsersync] Reloading Browsers...
[23:25:10] Starting 'config-assemble'...
[23:25:10] Before templates
[23:25:10] After templates
[23:25:10] Finished 'config-assemble' after 130 msassemble
browserSync.reload() only no the entire listener. I will try
gulp.task('assemble', ['config-assemble'], function () {
log('Assemble');
return asm.toStream('pages')
.pipe($.plumber({errorHandler: sassErrorHandler})) // .on('error', console.log)
.pipe(asm.renderFile())
.pipe($.plumber({errorHandler: sassErrorHandler})) // .on('error', console.log)
.pipe($.extname())
.pipe(asm.dest(config.build))
.pipe(browserSync.stream())
;
});
hey there,
I'm lost on this one: I tried to cache my html files in order to stop assemble parsing each and every existing hbs to html when I edited a single file. Can anybody point me in the right direction? My setup here is: gulp (3!), gulp-cached and assemble
assemble task
app.task('parse', () => {
const bss = bs.get('bsServer');
return app.toStream('pages')
.pipe(cache(config.cache.html))
.pipe(plumberNotifier())
.pipe(extname())
.pipe(app.renderFile())
. ...
gulp.task('html:parse', (cb) => {
app.build('parse', (err) => {
if (err) throw err;
cb();
});
});
gulp.task('html:init', (cb) => {
app.build('init', (err) => {
if (err) throw err;
cb();
});
});
gulp.task('html:go', cb => runSequence(['html:init', 'html:parse'], cb));First run is fine as I need to generate everything at least once but then...
watch.js
function changeHandler(cacheName, event) {
if (event.type === 'deleted' && cache.caches[cacheName][event.path] !== undefined && cache.caches[cacheName] !== undefined) {
delete cache.caches[cacheName][event.path];
log('Deleted from cache:', event.path);
}
}
gulp.watch(
"src/html/**/*.hbs", { interval: 500 }, ['html:go']);
html.on('change', changeHandler.bind(this, config.cache.html));gulp-cached obviously empties the stream contents so I wonder how to cope with that.
- templates loaded onto a collection (
pages) - the collection is streamed into a plugin pipeline to render each template
- files are writen to the filesystem
- customize how the templates are loaded (e.g. keep a cache of what’s been rendered and only re-load changed files)
- use
gulp-cached? to remove the pages from the collection for re-rendering
app.pages or app.views.pages
app.renderfile() because there is no file in the pipeline.Thinking about adapting app.pages to match the changed file I needed access to the underlying process, something to pinpoint the right object type for app.pages and such. Is there something like a debug plugin you can recommend?
file.path will be the same as it was after the first time through (which I assume would be something.html instead of something.hbs) which would cause gulp-cached to miss because it uses file.path
@doowb hm, actually you bring me to a point where I wonder about that caching mechanism, too :worried:
Actually the gulp watch will notice the change in the hbs file and call "html:go" which then calls html:init and html:parse as shown above. The line .pipe(cache(config.cache.html))will create and also compare against the cache. (cache is the gulp-cached instance, config.cache.html is just a string holding the cache name "html"). I run html:go once when I start gulp and then on every .hbs file change.
According to the description of gulp-cached (https://www.npmjs.com/package/gulp-cached#usage) it won't pass files downstream that are in the cache and unchanged. It also states
Please note that this will not work with plugins that operate on sets of files (concat for example).
Might that be the problem?
I can't tell what gulp-cached really does as I don't fully understand the gulp pipeline workflow. So maybe that might be a topic for the gulp-cached owners to answer.
can anyone help me I am trying to access a variable I pass in at runtime in an npm script:
"build": "assemble --option=production:true"
which I then want to use in a conditional:
{{#isnt production}}hide this in prod{{/production}}
I've tried using just --production & --production=true and nothing seems to work?
app.data({production: environment});