Add lazy loaded directive example to demo project. Use separated gulp…

… to run demo

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));
         }
       }
     });

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']);
+});

lib/app/sass/_styleguide_variables.scss

@@ -5,7 +5,7 @@ $tertiary-color: #F7FCF1;
 
 // Button and link colors
 $primary-action-color: #EB7F00;
-$default-action-color: #1695A3;
+$default-action-color: #8cd960;
 $action-color-change: 5%;
 
 // Fonts

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
+

lib/demo/testDirective.html

@@ -0,0 +1 @@
+<p>Hello from test directive</p>

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'
+    };
+  });

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"
   }
 }