First I off, I highly recommend reading CSSTricks' Build a Style Guide Straight from Sass, it's a game changer for auto style guide generation. That said, I assume if you're at this page you're already a convert.

I'm going to assume the following:

  • node-kss is installed in the same directory as your gulpfile
  • node-kss has been set up and is generating a style guide.
  • you have at least very rudimentary understanding of gulp

If either of the first is untrue, please go to the CSS tricks link as it's a wonderful guide and will get you a working spot >Node-KSS has a gulp repository but its wantonly out of date. I recommend not using it. Fortunately chaining it's pretty easy. First, we need to install gulp-shell in our gulp project.

    npm install --save-dev gulp-shell

Next, we're going to need to require gulp shell in our gulp file, this can vary based on your set up, it may be var or const depending on if you're running ES6 or not or part of a larger declaration:


    const shell = require('gulp-shell')


    var shell = require('gulp-shell')

Next we're going to create in our gulpfile a task to execute the command to run node-kss (note you can run alterations of said command if your configuration is different, kss is not required to be installed in the same place as gulp.)

gulp.task('kss', shell.task(['./node_modules/.bin/kss --config kss-config.json']));

Lastly, we now need to reference this task in another task. Below is an example of how I'm using it, I created a watch task called "styleguide", a slightly modified version of my default task. Your task will differ from mine

gulp.task('styleguide',['serve'], function() {
  // Watch .scss files'**/*.scss', function(event) {
    console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');'sass');'kss');
    }); , function(event) {
      console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');'scripts');'compress');
    });'change', browserSync.reload);'change', browserSync.reload);

Note that I applied'kss'); after my Sass task has run, this will generate a style guide. Since the style guide generates new HTML on every save, my'change', browserSync.reload); is triggered because of my project's directory structure. This is why I created a separate task named "styleguide" as I do not always need my kss task to run, and do not want to interfere with live CSS injection via browserSync. Your needs will vary.