add additional styles task which compiles scss using "gulp-sass"

Author: maxklenk

README.md

@@ -9,7 +9,7 @@ Boilerplate gulp tasks for quick project setup.
 var gulp = require('gulp');
 var modular = require('gulp-modular');
 
-var tasks = ['bower', 'clean', 'compass', 'configScripts', 'connect', 'fonts', ...];
+var tasks = ['bower', 'clean', 'sass', 'configScripts', 'connect', 'fonts', ...];
 var config = {...};
 
 modular(gulp, tasks, config);
@@ -30,7 +30,8 @@ Detailed documentation of our best practice workflow and the config object will
  - `statics` copies static files to a particular distribution folder.
 
 ## Stylesheets
- - `compass` compiles scss files to CSS files.
+ - `compass` compiles scss files to CSS files using [compass](https://github.com/Compass/compass).
+ - `sass` compiles scss files to CSS using [gulp-sass](https://github.com/dlmanning/gulp-sass).
  - `vendorStyles` concats all styles from the bower dependencies and stores the file to a particular distribution folder.
 
 ## AngularJS & JavaScript

index.js

@@ -71,6 +71,10 @@ module.exports = function(gulp, tasks, config) {
     require('./tasks/reload')(gulp, config.bases.dist);
   }
 
+  if (tasks.indexOf('sass') !== -1) {
+    require('./tasks/sass')(gulp, config.app.scss, config.dist.css, config.production, config.sourceMapsPath);
+  }
+
   if (tasks.indexOf('scripts') !== -1) {
     require('./tasks/scripts')(gulp, config.app.js, config.dist.js, config.sourceMapsPath);
   }

package.json

@@ -29,6 +29,7 @@
     "extend": "^2.0.1",
     "gulp": "^3.9.0",
     "gulp-angular-filesort": "^1.1.1",
+    "gulp-autoprefixer": "^2.3.1",
     "gulp-bower": "0.0.10",
     "gulp-cached": "^1.1.0",
     "gulp-compass": "^2.1.0",
@@ -52,6 +53,7 @@
     "gulp-preprocess": "^1.2.0",
     "gulp-protractor": "^1.0.0",
     "gulp-remember": "^0.3.0",
+    "gulp-sass": "^2.0.3",
     "gulp-sourcemaps": "^1.5.2",
     "gulp-uglify": "^1.2.0",
     "karma": "^0.12.36",

tasks/compass.js

@@ -4,7 +4,7 @@ var compass = require('gulp-compass');
 
 
 module.exports = function(gulp, src, project, sass, css) {
-  gulp.task('compass', function(done) {
+  gulp.task('styles', function(done) {
     gulp.src(src)
       .pipe(compass({
         project: project,

tasks/index.js

@@ -35,6 +35,6 @@ module.exports = function(gulp, dest, index, appName) {
   gulp.task('justIndex', injectIndex);
 
   // use this initial building
-  gulp.task('index', ['compass', 'configScripts', 'scripts', 'vendorScripts', 'vendorStyles'], injectIndex);
+  gulp.task('index', ['styles', 'configScripts', 'scripts', 'vendorScripts', 'vendorStyles'], injectIndex);
 };
 

tasks/sass.js

@@ -0,0 +1,33 @@
+var sass = require('gulp-sass'),
+  sourceMaps = require('gulp-sourcemaps'),
+  autoPrefixer = require('gulp-autoprefixer');
+  //gulpif = require('gulp-if'),
+  //rev = require('gulp-rev'),
+  //revReplace = require('gulp-rev-replace'),
+
+
+module.exports = function(gulp, src, dest, uglifyFlag, sourceMapsPath) {
+  gulp.task('styles', [], function (done) {
+    var options = {
+      outputStyle: uglifyFlag ? 'compressed' : 'nested'
+    };
+
+    //var revOptions = {
+    //  manifest: gulp.src('./' + config.dist.fonts + 'rev-manifest.json')
+    //};
+
+    gulp.src(src)
+      .pipe(sourceMaps.init())
+      .pipe(sass(options).on('error', sass.logError))
+      .pipe(autoPrefixer({
+        browsers: ['last 2 versions'],
+        cascade: false
+      }))
+      //.pipe(gulpif(config.rev, revReplace(revOptions)))
+      //.pipe(gulpif(config.rev, rev()))
+      .pipe(sourceMaps.write(sourceMapsPath))
+      .pipe(gulp.dest(dest));
+    done();
+  });
+};
+