polish gulp task for styles

* libsass already support import css after v3.2 (see sass/libsass#754)
* support to watch scss files
* replace includePaths syntax by @import relative path
* rename app.scss to main.scss

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

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

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