using with gulp

[VinSpee]

Hi!

Amazing work! I really love what you're doing.

A question: How can I use this (cleanly) with gulp? I'd like to be able to use it by harnessing the module api, not dropping down to an exec on the command line. Is this possible?

[JohnAlbin]

I currently use gulp-shell like so: [Edit: I don't use gulp-shell anymore as its been blacklisted for gulp plugins. See my comment below.]

// Include Gulp & Tools We'll Use
var gulp = require('gulp'),
  shell  = require('gulp-shell');

// Build styleguide.
gulp.task('styleguide', ['clean:styleguide', 'styleguide:markup'], shell.task([
    // kss-node [source folder of files to parse] [destination folder] --template [location of template files]
    'kss-node <%= source %> <%= destination %> --template <%= template %>'
  ], {
    templateData: {
      source:       'path/to/sass',
      destination:  'path/to/styleguide',
      template:     'path/to/styleguide/template'
    }
  }
));

It works well enough. And is really fast.

I understand that dropping to a shell is going to be slower than direct API configuration, but the other changes to kss-node have been much higher priority.

[JohnAlbin]

I think that #138 is required in order to "use this (cleanly) with gulp".

[ethikz]

I use gulp-run to run CLI. It might not be the best way but it does work

gulp.task('styleguidescss', function() {
  var styleguideCompile = gulp.src(paths.styleguidescss)
    .pipe(plugin.sass())
    .pipe(plugin.autoprefixer("last 2 versions"))
    .pipe(plugin.minifyCss())
    .pipe(gulp.dest(outdir + '/styleguide/assets/css'))
    .on('error', plugin.util.log);

  plugin.run('kss-node src/main/webapp/styleguide-src/assets/css /styleguide --config src/main/webapp/styleguide-src/styleguide-template/config.json').exec();

  return styleguideCompile.pipe(plugin.connect.reload());
});

[JohnAlbin]

I've updated my Gulp task to this: zomg. See next comment.

var options = {}; // Sets various paths in my app.

var flags = [
  '--source', options.theme.sass,
  '--source', options.theme.css + 'style-guide/',
  '--destination', options.rootPath.styleGuide,
  '--css', options.theme.css + 'styles.css',
  '--homepage', 'homepage.md',
  '--title', 'Zen 7.x-6.x Style Guide'
];

gulp.task('styleguide', function(cb) {
  var cmd = spawn('kss-node', flags, {stdio: 'inherit'});
  return cmd.on('close', cb);
});

[JohnAlbin]

From #252:

I just released 2.2.0 and was integrating it with my Gulp setup when I realized that a simple function could wrap around the new CLI module to be used as a Gulp task.

Here's my new gulp task:

// Other options.* set earlier in my gulpfile.js

options.styleGuide = {
  source: [
    options.theme.sass
  ],
  destination: options.rootPath.styleGuide,

  // The css and js paths are URLs, like '/misc/jquery.js'.
  // The following paths are relative to the generated style guide.
  css: [
    path.relative(options.rootPath.styleGuide, options.theme.css + 'styles.css'),
    path.relative(options.rootPath.styleGuide, options.theme.css + 'style-guide/chroma-kss-styles.css'),
    path.relative(options.rootPath.styleGuide, options.theme.css + 'style-guide/kss-only.css')
  ],
  js: [
  ],

  homepage: 'homepage.md',
  title: 'Zen 7.x-6.x Style Guide'
};

// kss-node 2.3.1 and later.
var kss = require('kss');

gulp.task('styleguide', function(cb) {
  kss(options.styleGuide, cb);
});

[Edit: for kss-node 3.x… ]

// kss-node 3.0.0-beta1 and later.
var kss = require('kss');

gulp.task('styleguide', function() {
  return kss(options.styleGuide);
});

Pretty simple, yes!

In 3.x, I'd like to make it possible for KSS to handle gulp.src and gulp.dest.

[digitaldonkey]

kss --version 3.0.0-beta.14

var kss = require('kss');
gulp.task('styleguide', function(){
    return kss({
      source: 'scss',
      destination: config.server.styleguide.destination,
      builder: config.server.styleguide.template,
      homepage: config.server.styleguide.homepage,
      css: '../css/main.css'
      });
  });

Edit: Remove Callback, according to Johns following comment.

[JohnAlbin]

@digitaldonkey Almost. kss-node 3.x supports Promises as does Gulp. So you should remove the cb callback reference as it will cause problems when you don't actually call the cb function.

gulp.task('styleguide', function () {
  return kss(options.styleGuide);
});

[ryuran]

The up to date gulp 4 way

const kss = require('kss');
const kssConfig = require('./kss.json');

function styleguide() {
  return kss(kssConfig);
}
styleguide.description = 'Build the style guide with KSS';

export.styleguide = styleguide;