Adding styleguide to build process in development mode.

Jaswetz · Apr 6, 2015 · 1b5d6e6 · 1b5d6e6
1 parent 9d1e99c
commit 1b5d6e6
Show file tree

Hide file tree

Showing 14 changed files with 87 additions and 24 deletions.
diff --git a/README.md b/README.md
@@ -1,10 +1,5 @@
 # Gulp-Starter
+Gulp Starter Is a small build process to help create content/styleguide first designs. 
 
-I am experimenting in building a workflow with Gulp for my new portfolio website.
 
-## Requienements
 
-- Live Reload
-- Live Generated Styleguide
-- Sass
-- Build and Development Environments
diff --git a/app/index.html b/app/index.html
@@ -29,7 +29,7 @@
 
   </head>
   <body>
-    <h1>Gulp-Starter</h1>
+    <h1>Gulp-Ster</h1>
 
     <!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
     <script>

diff --git a/app/js/main.js b/app/js/main.js
@@ -1 +1 @@
-// JS
+// Script
diff --git a/app/scss/main.scss b/app/scss/main.scss
@@ -1,4 +1,53 @@
+$primary-color: blue;
+
+
 body {
-    background: blue;
+    background: $primary-color;
 }
 
+// Colors and typography
+//
+// This section describes base colors and typography
+//
+// Styleguide 1.0
+
+// Main colors
+//
+// $primary-color - Primary color
+// $secondary-color - Secondary color
+// $primary-action-color - Primary button color
+// $default-action-color - Default button color and link color
+// $tertiary-color - Used for input hovers and hilights
+//
+// markup:
+// <div style="background: {$modifiers};" class="styleguide-color">{$modifiers}</div>
+//
+// Styleguide 1.1
+
+// Calculated colors
+//
+// .color_lighten - Lighter than default action color
+// .color_darken - Darker than default action color
+//
+// markup:
+// <div class="styleguide-color {$modifiers}"></div>
+//
+// Styleguide 1.1.1
+
+// Buttons
+//
+// Buttons can and should be clicked.
+//
+// markup: <button class="button">Hello</button>
+//
+// :hover - Highlight the button when hovered.
+//
+// Styleguide 1.1.2
+.button {
+
+    color: $primary-color;
+
+  &:hover {
+    color: blue;
+  }
+}
diff --git a/build/production/assets/css/main.css b/build/production/assets/css/main.css
diff --git a/build/production/assets/css/main.min.css b/build/production/assets/css/main.min.css
diff --git a/build/production/assets/img/black.jpg b/build/production/assets/img/black.jpg
diff --git a/build/production/assets/img/img-test.jpg b/build/production/assets/img/img-test.jpg
diff --git a/build/production/assets/js/main.js b/build/production/assets/js/main.js
diff --git a/build/production/assets/js/main.min.js b/build/production/assets/js/main.min.js
diff --git a/build/production/index.html b/build/production/index.html
diff --git a/docs/NOTES.md b/docs/NOTES.md
@@ -0,0 +1,3 @@
+# Articles and Tutorials
+- https://medium.com/@operatino/living-style-guide-tools-in-depth-overview-28cfffb92d05
+- http://www.smashingmagazine.com/2015/03/05/automating-style-guide-driven-development/
diff --git a/gulpfile.js b/gulpfile.js
@@ -13,6 +13,8 @@ var gulp = require('gulp'),
     minifyHTML = require('gulp-minify-html'),
     styleguide = require('sc5-styleguide'),
     plumber = require('gulp-plumber'),
+    gutil = require('gulp-util');
+    outputPath = 'build/development/styleguide',
     del = require('del');
 
 // error function for plumber
@@ -125,9 +127,34 @@ gulp.task('devImg', function() {
     .pipe(notify({ message: 'Images task complete' }))
 });
 
+// All unprocessed styles containing the KSS markup and style variables.
+// This will process the KSS markup and collects variable information.
+gulp.task('styleguide:generate', function() {
+    return gulp.src('app/scss/*.scss')
+        .pipe(styleguide.generate({
+            title: 'My Styleguide',
+            rootPath: outputPath,
+            server: true,
+            port: '5000',
+            overviewPath: 'README.md'
+        }))
+        .pipe(gulp.dest(outputPath));
+});
+
+//Preprocessed/compiled stylesheets.
+// This will create necessary pseudo styles and create the actual stylesheet to be used in the styleguide.
+gulp.task('styleguide:applystyles', function() {
+    return gulp.src('app/scss/main.scss')
+        .pipe(sass({
+            errLogToConsole: true
+        }))
+        .pipe(styleguide.applyStyles())
+        .pipe(gulp.dest(outputPath));
+});
+
 // Clean up development!
 gulp.task('cleanDev', function(cb) {
-    del(['build/development/assets', 'build/development/*.html'], cb)
+    del(['build/development/assets', 'build/development/styleguide', 'build/development/*.html'], cb)
 });
 
 // Clean up production!
@@ -137,15 +164,15 @@ gulp.task('cleanBuild', function(cb) {
 
 // Watch task
 gulp.task('watch', ['browser-sync'], function () {
-    gulp.watch('app/scss/**/*', ['styles']);
+    gulp.watch('app/scss/**/*', ['styles', 'styleguide']);
     gulp.watch('app/js/**/*', ['browsersync-reload', 'devJs', 'copyHtml']);
     gulp.watch('build/development/**/*', ['browsersync-reload']);
     gulp.watch('app/**/*.html', ['browsersync-reload', 'copyHtml']);
     gulp.watch('app/img/**/*', ['browsersync-reload','devImg', 'copyHtml']);
 });
 
 
+gulp.task('styleguide', ['styleguide:generate', 'styleguide:applystyles']);
 gulp.task('serve',['cleanDev', 'devImg', 'devJs', 'copyHtml', 'styles', 'watch'], function() {});
 gulp.task('build',['cleanBuild', 'buildStyles', 'buildImg', 'buildJs', 'miniHtml'], function() {});
 
-
diff --git a/package.json b/package.json
@@ -23,6 +23,7 @@
     "gulp-rename": "^1.2.2",
     "gulp-sass": "^1.3.3",
     "gulp-uglify": "^1.1.0",
+    "gulp-util": "^3.0.4",
     "sc5-styleguide": "^0.3.8"
   },
   "scripts": {