Created
May 8, 2015 12:26
-
-
Save matt-bailey/65ecc6d498348d5ff5e9 to your computer and use it in GitHub Desktop.
SC5 Style Guide Generator Grunt usage instructions
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
module.exports = function(grunt) { | |
var gulp = require('gulp'), | |
styleguide = require('sc5-styleguide'); | |
grunt.initConfig({ | |
pkg: grunt.file.readJSON('package.json'), | |
sass: { | |
dist: { | |
files: { | |
'main.css': 'main.scss' | |
} | |
} | |
}, | |
gulp: { | |
'styleguide-generate': function() { | |
var outputPath = 'output'; | |
return gulp.src(['main.scss']) | |
.pipe(styleguide.generate({ | |
title: 'My Styleguide', | |
server: true, | |
rootPath: outputPath | |
})) | |
.pipe(gulp.dest(outputPath)); | |
}, | |
'styleguide-applystyles': function() { | |
gulp.src('main.scss') | |
.pipe(styleguide.applyStyles()) | |
.pipe(gulp.dest('output')); | |
} | |
}, | |
watch: { | |
scss: { | |
files: '**/*.scss', | |
tasks: ['sass', 'gulp:styleguide-generate', 'gulp:styleguide-applystyles'] | |
} | |
} | |
}); | |
grunt.loadNpmTasks('grunt-sass'); | |
grunt.loadNpmTasks('grunt-gulp'); | |
grunt.loadNpmTasks('grunt-contrib-watch'); | |
grunt.registerTask('default', ['gulp:styleguide-generate', 'gulp:styleguide-applystyles', 'watch']); | |
}; |
Thank you. This was very helpful. Wasn't sure what was failing with the standard documentation, but your guide got me in the right direction.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I've just started looking into the brilliant SC5 Style Guide Generator, but I found the Grunt usage instructions a little incomplete. So here's their Grunt code example, but expanded a bit so it just works.
What you need to do:
1: Create a basic package.json file
2: Install this stuff:
3: Create a
Gruntfile.js
file and paste in the code above.4: Create a
main.scss
file and put some CSS in it using the KSS documenting syntax5: Run
grunt
6: Assuming you don't get any errors, in your browser go to http://localhost:3000/
7: Ta da!
Obviously this is just a really simple example with one SCSS file, but it's enough to get things started and see how it works.