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 ms
assemble
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.
pages
)gulp-cached
? to remove the pages from the collection for re-renderingapp.pages
or app.views.pages
app.renderfile()
because there is no file in the pipeline.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});