From 8babc4bff7ef777b8eca4095ce8073ab5d38f846 Mon Sep 17 00:00:00 2001
From: Hannu Pelkonen <hannu@sc5.io>
Date: Thu, 4 Dec 2014 22:57:38 +0200
Subject: [PATCH] Add lazy loaded directive example to demo project. Use
 separate gulp file for demo

---
 README.md                   | 24 +++++++++++----------
 demo-gulpfile.js            | 42 +++++++++++++++++++++++++++++++++++++
 lib/app/sass/app.scss       | 14 +++++++++++++
 lib/demo/testDirective.html |  1 +
 lib/demo/testDirective.js   | 12 +++++++++++
 package.json                |  2 +-
 6 files changed, 83 insertions(+), 12 deletions(-)
 create mode 100644 demo-gulpfile.js
 create mode 100644 lib/demo/testDirective.html
 create mode 100644 lib/demo/testDirective.js

diff --git a/README.md b/README.md
index 1fa7a5e3..b41f0bf9 100644
--- a/README.md
+++ b/README.md
@@ -92,10 +92,14 @@ For more specific documentation. See [Build options](#build-options) section.
     var styleguide = require("sc5-styleguide");
 
     gulp.task("styleguide", function() {
+      var outputPath = '<destination folder>';
+
       return gulp.src(["**/*.css", "**/*.scss", "**/*.less"])
         .pipe(styleguide({
             title: "My Styleguide",
             server: true,
+            rootPath: outputPath,
+            styleVariables: '<LESS/SASS variable file>',
             overviewPath: "<path to your overview.md>",
             sass: {
                 // Options passed to gulp-sass
@@ -104,10 +108,10 @@ For more specific documentation. See [Build options](#build-options) section.
                 // Options passed to gulp-less
             }
           }))
-        .pipe(gulp.dest("<destination path>"));
+        .pipe(gulp.dest(outputPath));
     });
 
-    gulp.task("styleguide-watch", function() {
+    gulp.task("styleguide-watch", ["styleguide"], function() {
       // Start watching changes and update styleguide whenever changes are detected
       // Styleguide automatically detects existing server instance
       gulp.watch(["**/*.css", "**/*.scss", "**/*.less"], ["styleguide"]);
@@ -128,14 +132,9 @@ and declare the main source file as `sass` (or `less`) source option:
         "styles/**/*.less",
         "!styles/bootsrap/**"
         ])
-        .pipe(styleguide({
-            title: "My Styleguide",
-            overviewPath: "<path to your overview.md>",
-            less: {
-                src: "styles/app.less"
-            }
-          }))
-        .pipe(gulp.dest("<destination path>"));
+
+        ...
+
     });
 
 ### With Grunt
@@ -153,10 +152,13 @@ Then you are able to use the same gulp task inside you `Gruntfile`:
       pkg: grunt.file.readJSON('package.json'),
       gulp: {
         styleguide: function() {
+          var outputPath = '<destination folder>';
           return gulp.src(["**/*.css", "**/*.scss", "**/*.less"])
             .pipe(styleguide({
                 title: "My Styleguide",
                 server: true,
+                rootPath: outputPath,
+                styleVariables: '<LESS/SASS variable file>',
                 overviewPath: "<path to your overview.md>",
                 sass: {
                     // Options passed to gulp-sass
@@ -165,7 +167,7 @@ Then you are able to use the same gulp task inside you `Gruntfile`:
                     // Options passed to gulp-less
                 }
               }))
-            .pipe(gulp.dest("<destination path>"));
+            .pipe(gulp.dest(outputPath));
         }
       }
     });
diff --git a/demo-gulpfile.js b/demo-gulpfile.js
new file mode 100644
index 00000000..67aba5ba
--- /dev/null
+++ b/demo-gulpfile.js
@@ -0,0 +1,42 @@
+var gulp = require('gulp'),
+  styleguide = require('./lib/styleguide'),
+  source = 'lib/app/**/*.scss',
+  ouputPath = 'demo-output';
+
+gulp.task('styleguide', ['static'], function() {
+  return gulp.src(source)
+    .pipe(styleguide({
+        title: 'SC5 Styleguide',
+        server: true,
+        rootPath: ouputPath,
+        overviewPath: 'README.md',
+        styleVariables: 'lib/app/sass/_styleguide_variables.scss',
+        sass: {
+          src: 'lib/app/sass/app.scss',
+          includePaths: [
+            'node_modules/node-bourbon/assets/stylesheets',
+            'node_modules/node-neat/assets/stylesheets'
+          ]
+        },
+        filesConfig: [
+          {
+            name: 'sgAppTest',
+            files: [
+              'demo/testDirective.js'
+            ],
+            template: 'demo/testDirective.html'
+          }
+        ]
+      }))
+    .pipe(gulp.dest(ouputPath));
+});
+
+gulp.task('static', function() {
+  gulp.src(['lib/demo/**'])
+    .pipe(gulp.dest(ouputPath + '/demo'));
+});
+
+gulp.task('watch', ['styleguide'], function() {
+  // Start watching changes and update styleguide whenever changes are detected
+  gulp.watch(source, ['styleguide']);
+});
diff --git a/lib/app/sass/app.scss b/lib/app/sass/app.scss
index e20f1c86..25375a99 100644
--- a/lib/app/sass/app.scss
+++ b/lib/app/sass/app.scss
@@ -1202,3 +1202,17 @@ Styleguide 4.4
     color: rgba(255, 255, 255, 1);
   }
 }
+
+// Angular Directives
+//
+// Example of lazy loaded AngularJS directive from external project
+//
+// Styleguide 6.0
+
+// Test directive
+//
+// markup:
+// <div sg-test-directive>If you see this something is wrong</div>
+//
+// Styleguide 6.1
+
diff --git a/lib/demo/testDirective.html b/lib/demo/testDirective.html
new file mode 100644
index 00000000..3db957dc
--- /dev/null
+++ b/lib/demo/testDirective.html
@@ -0,0 +1 @@
+<p>Hello from test directive</p>
\ No newline at end of file
diff --git a/lib/demo/testDirective.js b/lib/demo/testDirective.js
new file mode 100644
index 00000000..68cfd5c9
--- /dev/null
+++ b/lib/demo/testDirective.js
@@ -0,0 +1,12 @@
+'use strict';
+
+// Test directive is used to demo lazy loading external directive in the test project
+
+angular.module('sgAppTest', [])
+  .directive('sgTestDirective', function($rootScope, $window, $timeout) {
+    return {
+      replace: true,
+      restrict: 'A',
+      templateUrl: 'demo/testDirective.html'
+    };
+  });
diff --git a/package.json b/package.json
index 41387ae0..e9368c0d 100644
--- a/package.json
+++ b/package.json
@@ -103,6 +103,6 @@
     "test-coverage": "node_modules/gulp/bin/gulp.js test-coverage",
     "prepublish": "node_modules/gulp/bin/gulp.js build",
     "build": "node_modules/gulp/bin/gulp.js build",
-    "demo": "bin/styleguide --output demo-output --source lib/app/sass/app.scss --config lib/app/styleguide_config.json --server --watch"
+    "demo": "node_modules/gulp/bin/gulp.js --gulpfile demo-gulpfile.js watch"
   }
 }