chore(demos): update build process, add sass compilation

demos/app.ios.scss

@@ -0,0 +1 @@
+@import "../ionic/ionic.ios";

demos/app.md.scss

@@ -0,0 +1 @@
+@import "../ionic/ionic.md";

demos/app.variables.local.scss

@@ -0,0 +1,2 @@
+$font-path: "/fonts";
+$roboto-font-path: "/fonts";

demos/app.variables.production.scss

@@ -0,0 +1,2 @@
+$font-path: "/fonts";
+$roboto-font-path: "/fonts";

demos/output.ios.scss

@@ -0,0 +1,5 @@
+$font-path: "/fonts";
+$roboto-font-path: "/fonts";
+
+
+@import "../ionic/ionic.ios";

demos/output.md.scss

@@ -0,0 +1,5 @@
+$font-path: "/fonts";
+$roboto-font-path: "/fonts";
+
+
+@import "../ionic/ionic.md";

gulpfile.js

@@ -566,6 +566,13 @@ gulp.task('build.demos', function() {
   var VinylFile = require('vinyl');
 
   var baseIndexTemplate = _.template(fs.readFileSync('scripts/demos/index.template.html'))();
+  var flags = minimist(process.argv.slice(2), flagConfig);
+
+  if ("production" in flags) {
+    buildDemoSass(true);
+  } else {
+    buildDemoSass(false);
+  }
   
   var tsResult = gulp.src(['demos/**/*.ts'])
     .pipe(cache('demos.ts'))
@@ -606,6 +613,47 @@ gulp.task('build.demos', function() {
   }
 });
 
+function buildDemoSass(isProductionMode) {
+  var sass = require('gulp-sass');
+  var autoprefixer = require('gulp-autoprefixer');
+  var minifyCss = require('gulp-minify-css');
+  var concat = require('gulp-concat');
+
+  var sassVars = isProductionMode ? 'demos/app.variables.production.scss': 'demos/app.variables.local.scss';
+
+  (function combineSass() {
+    gulp.src([
+        sassVars,
+        'demos/app.ios.scss'
+      ])
+    .pipe(concat('output.ios.scss'))
+    .pipe(gulp.dest('demos/'))
+
+    gulp.src([
+        sassVars,
+        'demos/app.md.scss'
+      ])
+    .pipe(concat('output.md.scss'))
+    .pipe(gulp.dest('demos/'))
+
+  })();
+
+  gulp.src([
+    'demos/output.ios.scss',
+    'demos/output.md.scss'
+  ])
+
+  .pipe(sass({
+      includePaths: [__dirname + '/node_modules/ionicons/dist/scss/'],
+    }).on('error', sass.logError)
+  )
+  .pipe(autoprefixer(buildConfig.autoprefixer))
+  .pipe(gulp.dest('dist/demos/'))
+  .pipe(minifyCss())
+  .pipe(rename({ extname: '.min.css' }))
+  .pipe(gulp.dest('dist/bundles/'));
+}
+
 
 /**
  * Tests

scripts/demos/index.template.html

@@ -6,9 +6,8 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 
   <link rel="stylesheet" type="text/css" href="/dist/demos/scrollbar-fix.css">
-  <link ios-href="/dist/bundles/ionic.ios.css" rel="stylesheet">
+  <link ios-href="../output.ios.css" rel="stylesheet">
-  <link md-href="/dist/bundles/ionic.md.css" rel="stylesheet">
+  <link md-href="../output.md.css" rel="stylesheet">
-  <link rel="stylesheet" type="text/css" href="app.css">
   <script type="text/javascript" src="/dist/demos/scrollbar-fix.js"></script>
 
 </head>