Improve documentation for grunt task

[gazzwi86]

I ran the npm install for the grunt task and for styleguidejs but am struggling to get it working. I'm not sure I have configured it correctly and was thinking that more verbose documentation could help others that find themselves in the same situation in future. My issue is listed below.

In my grunt init I have added the below:

styleguidejs: {
  options: {
    // options are passed to Styleguide.js
    title: "Style guide"
  },
  files: {
    'styleguide/index.html': ['client/app/**/*.scss']
  }
},

And have registered the task:

grunt.loadNpmTasks('grunt-styleguidejs');

When I run the task I see no errors:

➜  wa-hermes git:(development) ✗ grunt styleguidejs
Running "styleguidejs:files" (styleguidejs) task

Done, without errors.

However, I dont get any documentation folder created. I have added the folowing code chunk to a file but still see nothing:

/***
  title: Square buttons
  section: Buttons
  description: Very pretty square buttons
  example: |
    <a href="" class="btn btn-small">button</a>
    <a href="" class="btn btn-medium">button</a>
    <a href="" class="btn btn-large">button</a>
***/

Am I doing something wrong?

[mbaer3000]

I don't think you should be feeding SASS files as input to styleguidejs. Try running those through the due preprocessor first and see what happens.

[gazzwi86]

@mbaer3000 this doesnt appear to have resolved the issue. Having created and updated the config to the following, I'm not getting any documentation generated:

Grunt:

styleguidejs: {
  options: {
    // options are passed to Styleguide.js
    title: "Style guide"
  },
  files: {
    'styleguide/index.html': ['client/app/app.css']
  }
},

CSS:

/***
  title: Square buttons
  section: Buttons
  description: Very pretty square buttons
  example: |
    <a href="" class="hero__inner">button</a>
    <a href="" class="hero__inner">button</a>
    <a href="" class="hero__inner">button</a>
***/
.hero__inner {
  padding-top: 0;
}

[Aratramba]

I think you should have a subtask inside styleguidejs, since it's a grunt-multitask. I've added a sample gruntfile here https://github.com/EightMedia/grunt-styleguidejs/blob/master/Gruntfile.js

styleguidejs: {
  task:{
    options: {
      // options are passed to Styleguide.js
      title: "Style guide"
    },
    files: {
      'styleguide/index.html': ['client/app/app.css']
    }
  }
},

does this fix it for you?

[Aratramba]

@gazzwi86 ?

[Aratramba]

assuming this is resolved