question

[alanontheweb]

Is there a demo page to play with, and how might one plug this into gulp?

Thanks

[emiloberg]

Hi!

Sorry I don't have a demo page available. I have this running on client sites and the styleguides aren't public on them. We (my agency) desperately needs to do something with our own site and I'll make the styleguide available there, but we've far to much payed work to do before that :/

What you see in the screenshot is pretty much what you get. The script will generate a HTML styleguide which will use the css rules of your site.

You're of course free to change the out of the box look if you want to. It's just a matter of modifying the the Template and Theme (see the "Custom Look & Feel" section of the README).

As for running it with gulp. I would use gulp-shell to run it as a shell action. Here's a sample Gulpscript.js which will monitor the css folders and make the styleguide when a file is updated.

var gulp  = require('gulp');
var shell = require('gulp-shell');
var watch = require('gulp-watch');

gulp.task('watch', function() {
  gulp.watch('src/main/webapp/css/**/*.scss', ['makeStyleguide']);
});

gulp.task('makeStyleguide', 
  shell.task(
    ['styleguide'] // This is the shell command to run
  )
);

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

[alanontheweb]

Ahh thanks! Yeah, I got it to compile from the CLI and it looks great. But with Gulp, I kept getting the options menu, so Gulp Shell is the answer =)

[emiloberg]

Sweet!

Let me know if you've any questions, or if you're missing a feature!

[alanontheweb]

Sure! Something that comes to mind (and I might add it myself) is a filter or in-page search engine for quickly scanning a doc. Something like this perhaps - http://rmm5t.github.io/jquery-sieve/

[emiloberg]

That'd be cool!

...but falls quite far down on my todo list. But, as the theme/template is fully user customizable you can do this without having to hack the generator itself, just update the template.html.

If you do, feel free to send me a pull request and I'll merge it into the default template.

I've previously used Lunr.js as client side search engine. I really like it.