[Docs] Recipes

[janiceilene]

We're doing a full rewrite of the docs. We've noticed that recipes is pretty unruly and the quality varies a lot. We need to trim, edit, and add to them.

We'd love to get some feedback on which recipes you use, which you don't touch, and what new ones you'd like to see!

[demurgos]

Hi,
I just wanted to say that the Delete files and folders recipe helped me when I started with Gulp. Deleting files is a common problem and the fact that you don't need a special plugin but can just use normal libraries is a good thing to know.

I did not use other recipes. Thanks for helping with the documentation.

[polybuildr]

I loved the handling-the-delete-event-on-watch recipe: it helped me get rid of many of the problems I was facing with my gulp setup previously.

[buksy90]

Hello, I would love to see classic documentation with functions signatures, explained inputs/outputs, listed input flags and examples on use :). I believe most of this could be autogenerated (except the examples).

[tehnorm]

Examples of using a testing tool chain with watch. Jasmine for example is a bit tricky. As gulp stays running, you have to manually clean require.cache when a change is detected.

Here is an example that we finally arrived on - opting to just spawn jasmine on each change and not having to deal with with some of the more subtle require.cache issues.

'use strict';
var gulp = require('gulp');
var del = require('del');
const path = require('path');
const debug = require('gulp-debug');
const { spawn } = require('child_process');

let server;

const jasmine_spawn =  () => {
        const jasmine_exec = path.resolve('specs', 'jasmine-runner.js');
        const jas = spawn('node', [jasmine_exec], {stdio: 'inherit'});
        return jas;
}

const watch_test = () => {
        var watcher = gulp.watch([
                'src/**/*.js',
                'specs/**/*.js',
                'config/*.*'
        ], {'name': 'test', 'read': false, 'delay': 100}, jasmine_spawn);
}

// gulp test:backend
const test = gulp.series(jasmine_spawn, watch_test);
test.description = 'Run tests and start watching if they succeed';
gulp.task('test', test);


// gulp jasmine:test
gulp.task('jasmine:test', jasmine_spawn);

[garza]

I relied a lot on the server-with-livereload example to get our web project up and running

[dominic-p]

I would personally love to see a recipe for integrating with webpack. I hacked something together, but I have the feeling it could be a lot better.

[jaireina]

What I do most of the time:

• SASS + Source maps
• Pug incremental builds
• ESLINT

Something that I remember took me some time to sort out:

• React / JSX / BABEL
• Being able to use ES6 code in the gulp file itself.

[bennycode]

Here is my recipe on how to use Jasmine 3.2 with gulp 4:

const chalk = require('chalk');
const gulp = require('gulp');
const Jasmine = require('jasmine');
const path = require('path');

const gutil = {
  log: require('fancy-log'),
};

gulp.task('test:node', (done) => {
  const jasmine = new Jasmine();
  jasmine.loadConfigFile(path.join(process.cwd(), 'spec', 'support', 'jasmine.json'));
  jasmine.configureDefaultReporter({
    showColors: true
  });

  jasmine.onComplete((passed) => {
    if (passed) {
      gutil.log(chalk`All specs have {green passed}.`);
      done();
      process.exit(0);
    }
    else {
      process.exit(1);
    }
  });

  jasmine.execute();
});

Unfortunately I had to work with process.exit. Otherwise the CLI stays open (although the Gulp task already finished).