From 41ac126b253f9a3c0b3b865eb70130f6e7409920 Mon Sep 17 00:00:00 2001
From: Charley Wu <akunzai@gmail.com>
Date: Sat, 28 May 2016 11:59:35 +0800
Subject: [PATCH] polish gulp task for styles

* libsass already support import css after v3.2 (see https://github.com/sass/libsass/pull/754)
* support to watch scss files
* replace includePaths syntax by @import relative path
* rename app.scss to main.scss
---
 gulpfile.js       | 22 +++++++---------------
 package.json      |  1 -
 src/app/app.scss  |  6 ------
 src/app/main.scss |  9 +++++++++
 4 files changed, 16 insertions(+), 22 deletions(-)
 delete mode 100644 src/app/app.scss
 create mode 100644 src/app/main.scss

diff --git a/gulpfile.js b/gulpfile.js
index 2d353890..8f6faa38 100755
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -30,9 +30,10 @@ var config = {
     dest: `${outDir}/fonts`
   },
   styles: {
-    src: `${sourceRoot}/app/*.scss`,
+    src: `${sourceRoot}/app/main.scss`,
     dest: `${outDir}/css`,
-    outputName: 'bundle.css'
+    outputName: 'bundle.css',
+    watch: `${sourceRoot}/app/**/*.scss`
   },
   scripts: {
     src: [
@@ -80,23 +81,14 @@ gulp.task('fonts', function () {
 
 gulp.task('styles', function () {
   var sass = require('gulp-sass');
-  var merge = require('gulp-merge');
   var concat = require('gulp-concat');
   var cleanCSS = require('gulp-clean-css');
   var autoprefixer = require('gulp-autoprefixer');
-  return merge(
-    gulp.src(config.styles.src)
+  return gulp.src(config.styles.src)
       .pipe(gulpif(global.devMode, sourcemaps.init()))
       .pipe(sass({
-        outputStyle: global.devMode ? 'nested' : 'compressed',
-        includePaths: [
-          'node_modules/compass-mixins/lib',
-          'node_modules/bootstrap-sass/assets/stylesheets',
-          'node_modules/font-awesome/scss']
-      }).on('error', sass.logError)),
-    gulp.src([
-      'node_modules/angular/*.css',
-      'node_modules/angular-ui-bootstrap/dist/*.css']))
+        outputStyle: global.devMode ? 'nested' : 'compressed'
+      }).on('error', sass.logError))
     .pipe(concat(config.styles.outputName))
     .pipe(gulpif(!global.devMode, autoprefixer()))
     .pipe(gulpif(!global.devMode, cleanCSS({
@@ -152,7 +144,7 @@ gulp.task('watchify', ['tslint'], function () {
 
 gulp.task('watch', ['assets', 'watchify'], function () {
   // styles
-  gulp.watch([config.styles.src], ['styles']);
+  gulp.watch([config.styles.watch], ['styles']);
   // tslint
   gulp.watch([config.scripts.watch], ['tslint']);
   // constants
diff --git a/package.json b/package.json
index 1e21e94d..284101ce 100644
--- a/package.json
+++ b/package.json
@@ -33,7 +33,6 @@
     "gulp-concat": "^2.6.0",
     "gulp-connect": "^4.0.0",
     "gulp-if": "^2.0.0",
-    "gulp-merge": "^0.1.1",
     "gulp-ng-annotate": "^2.0.0",
     "gulp-ng-config": "^1.3.0",
     "gulp-sass": "^2.3.1",
diff --git a/src/app/app.scss b/src/app/app.scss
deleted file mode 100644
index a5b8011a..00000000
--- a/src/app/app.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-$icon-font-path: "../fonts/";
-@import "bootstrap";
-$fa-font-path: "../fonts";
-@import "font-awesome";
-@import "compass";
-@import "compass/reset";
\ No newline at end of file
diff --git a/src/app/main.scss b/src/app/main.scss
new file mode 100644
index 00000000..92850f0a
--- /dev/null
+++ b/src/app/main.scss
@@ -0,0 +1,9 @@
+$icon-font-path: "../fonts/";
+$fa-font-path: "../fonts";
+
+@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
+@import "../../node_modules/font-awesome/scss/font-awesome";
+@import "../../node_modules/compass-mixins/lib/compass";
+@import "../../node_modules/compass-mixins/lib/compass/reset";
+@import "../../node_modules/angular/angular-csp";
+@import "../../node_modules/angular-ui-bootstrap/dist/ui-bootstrap-csp";