How to use grunt-gulp with load-grunt-config

[matt-bailey]

I've been using load-grunt-config for a while now and it's great! However, I'm struggling to get it working with grunt-gulp.

This is my Gruntfile:

module.exports = function(grunt) {

    var gulp = require('gulp'),
        styleguide = require('sc5-styleguide');

    require('time-grunt')(grunt);

    require('load-grunt-config')(grunt, {
        init: true,
        jitGrunt: true
    });
};

And my gulp.js task config file:

module.exports = {
  styleguideGenerate: function() {
    var outputPath = 'docs';
    return gulp.src(['dist/styles/main.css'])
      .pipe(styleguide.generate({
          title: 'Style Guide',
          server: true,
          rootPath: outputPath
        }))
      .pipe(gulp.dest(outputPath));
  },
  styleguideApplyStyles: function() {
    gulp.src('dist/styles/main.css')
      .pipe(styleguide.applyStyles())
      .pipe(gulp.dest('docs'));
  }
};

When I run grunt gulp:styleguideGenerate it verifies that my property exists in the config, but then I get a Warning: undefined is not a function error:

Loading "grunt-gulp" plugin

Registering "/Volumes/CaseSensitive/sites/sassbase/node_modules/grunt-gulp/tasks" tasks.
Loading "gulp.js" tasks...OK
+ gulp

Running "gulp:styleguideGenerate" (gulp) task
Verifying property gulp.styleguideGenerate exists in config...OK
Warning: undefined is not a function Use --force to continue.

If I run grunt with the --config-debug flag I can see that my 'gulp' task config is empty:

"gulp": {},

I assume it's because the 'requires' at the top of my Gruntfile for gulp and sc5-styleguide aren't being 'pulled' through to the task. Can you help?

[SolomoN-ua]

Hi @matt-bailey, first of all I think this two lines:

var gulp = require('gulp'),
      styleguide = require('sc5-styleguide');

should be in your gulp.js file not in Gruntfile.js.

[matt-bailey]

Hi @SolomoN-ua, thanks for getting back to me. I did wonder that as well, so I tried a few options:

1. At the top of gulp.js, before module.exports = { - this gives the same Warning: undefined is not a function error.
2. Directly inside module.exports = {, so just before the first function is defined - this produces a syntax error on the gulp variable (Unexpected identifier).
3. Inside each of the styleguide functions - this also throws the Warning: undefined is not a function error.

Just so you know, I have this config working in a regular Gruntfile (i.e. not using load-grunt-config). I'll paste it below in case it helps (it's ever so slightly different but the differences, when put in the config above, throw the same errors anyway):

module.exports = function(grunt) {

  var gulp = require('gulp'),
      styleguide = require('sc5-styleguide');

  grunt.initConfig({

    pkg: grunt.file.readJSON('package.json'),

    gulp: {
      'styleguide-generate': function() {
        var outputPath = 'output';
        return gulp.src(['main.css'])
          .pipe(styleguide.generate({
              title: 'My Styleguide',
              server: true,
              rootPath: outputPath
            }))
          .pipe(gulp.dest(outputPath));
      },
      'styleguide-applystyles': function() {
        gulp.src('main.css')
          .pipe(styleguide.applyStyles())
          .pipe(gulp.dest('output'));
      }
    }
  });

  grunt.loadNpmTasks('grunt-gulp');

  grunt.registerTask('default', ['gulp:styleguide-generate', 'gulp:styleguide-applystyles']);

};

[SolomoN-ua]

Try something like this:

// gulp.js
var gulp = require('gulp'),
    styleguide = require('sc5-styleguide');

module.exports = function() {
    console.log(gulp, styleguide);

    return {
        styleguideGenerate: { ... }
    }
};

[SolomoN-ua]

@matt-bailey, trying to run it locally

[matt-bailey]

Awesome! If you want to know how I got it working first without load-grunt-config I put instructions on this gist: https://gist.github.com/matt-bailey/65ecc6d498348d5ff5e9

On Fri, 3 Jul 2015 at 16:28 Anatoliy Syernyi notifications@github.com wrote:

@matt-bailey https://github.com/matt-bailey, trying to run it locally

— Reply to this email directly or view it on GitHub https://github.com/firstandthird/load-grunt-config/issues/131#issuecomment-118373641 .

[SolomoN-ua]

@matt-bailey everything works just fine with this config:

// gulp.js
var gulp = require('gulp'),
    styleguide = require('sc5-styleguide');

module.exports = {
    'styleguide-generate': function() {
        var outputPath = 'output';
        return gulp.src(['main.css'])
            .pipe(styleguide.generate({
                title: 'My Styleguide',
                server: true,
                rootPath: outputPath
            }))
            .pipe(gulp.dest(outputPath));
    },
    'styleguide-applystyles': function() {
        gulp.src('main.css')
            .pipe(styleguide.applyStyles())
            .pipe(gulp.dest('output'));
    }
};

[SolomoN-ua]

$ grunt gulp
Running "gulp:styleguide-generate" (gulp) task
Express server listening on port 3000

Running "gulp:styleguide-applystyles" (gulp) task

Done, without errors.

Execution Time (2015-07-03 15:37:11 UTC)
loading tasks              1.1s  ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 48%
loading grunt-gulp        209ms  ▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 9%
gulp:styleguide-generate  932ms  ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 42%
Total 2.2s

[matt-bailey]

Strange... I think I will set up my project again from scratch and see what happens - I've obviously done something wrong. Huge thanks for looking into this - I'll let you know how I get on.

[SolomoN-ua]

Ok, just let me know if you will need my help!

[matt-bailey]

Yep, a clean project and it works just fine. Not sure what's going wrong on the old project as I just copied and pasted things over. Maybe an out-of-date dependency? Anyway, it's all good now. Thanks again for your help.