Added sass scripting capability

Author: Stephen Smith

README.md

@@ -6,7 +6,7 @@ This package provides common gulp tasks for building react components with:
 * Browserify for transforming JSX and creating distribution builds
 * Watchify for automatic, efficient rebundling on file changes
 * Connect for serving examples during development, with live-reload integration
-* LESS stylesheets for examples
+* LESS/Sass stylesheets for examples
 * Publishing examples to Github Pages
 * Publishing packages to npm and bower
 
@@ -23,7 +23,7 @@ The tasks assume you are following the following conventions for your project:
 * A standalone package will be published to a dist folder (for Bower)
 * Examples consist of
 	* Static file(s) (e.g. html, images, etc)
-	* One or more stylesheets to be generated with LESS
+	* One or more stylesheets to be generated with LESS/Sass
 	* One or more scripts to be bundled with Browserify
 * Examples will be packaged into an examples dist folder, and published to github pages
 
@@ -143,6 +143,36 @@ initGulpTasks(gulp, taskConfig);
 
 ```
 
+#### Sass instead of Less
+
+If your project uses Sass instead of Less, use the same syntax but with `sass` instead of `less`.
+
+```javascript
+var taskConfig = {
+
+	component: {
+		name: 'MyComponent',
+		dependencies: [ /* ... */ ],
+		sass: {
+			path: 'sass',
+			entry: 'my-component.scss'
+		}
+	},
+
+	example: {
+		src: 'example/src',
+		dist: 'example/dist',
+		files: [ /* ... */ ],
+		scripts: [ /* ... */ ],
+		sass: [
+			'app.scss'
+		]
+	}
+
+};
+
+```
+
 ## Contributing
 
 I wrote this package because maintaining my build process across multiple packages became a repetitive chore with large margin for error.

package.json

@@ -30,6 +30,7 @@
     "gulp-less": "^3.0.3",
     "gulp-minify-css": "^1.2.1",
     "gulp-rename": "^1.2.2",
+    "gulp-sass": "^2.3.1",
     "gulp-streamify": "^1.0.2",
     "gulp-uglify": "^1.4.1",
     "gulp-util": "^3.0.6",

tasks/dist.js

@@ -3,6 +3,7 @@ var browserify = require('browserify');
 var del = require('del');
 var gutil = require('gulp-util');
 var less = require('gulp-less');
+var sass = require('gulp-sass');
 var rename = require('gulp-rename');
 var shim = require('browserify-shim');
 var source = require('vinyl-source-stream');
@@ -52,6 +53,17 @@ module.exports = function (gulp, config) {
 				.pipe(gulp.dest('dist'))
 		});
 		buildTasks.push('build:dist:css');
+	} else if (config.component.sass && config.component.sass.entry) {
+		gulp.task('build:dist:css', ['clean:dist'], function () {
+			return gulp.src(config.component.sass.path + '/' + config.component.sass.entry)
+				.pipe(sass())
+				.pipe(rename(config.component.pkgName + '.css'))
+				.pipe(gulp.dest('dist'))
+				.pipe(rename(config.component.pkgName + '.min.css'))
+				.pipe(minifyCSS())
+				.pipe(gulp.dest('dist'))
+		});
+		buildTasks.push('build:dist:css');
 	}
 
 	gulp.task('build:dist', buildTasks);

tasks/examples.js

@@ -6,6 +6,7 @@ var connect = require('gulp-connect');
 var del = require('del');
 var gutil = require('gulp-util');
 var less = require('gulp-less');
+var sass = require('gulp-sass');
 var merge = require('merge-stream');
 var shim = require('browserify-shim');
 var source = require('vinyl-source-stream');
@@ -127,10 +128,20 @@ module.exports = function (gulp, config) {
 	});
 
 	gulp.task('build:example:css', function () {
-		if (!config.example.less) return;
+		var css = null;
+		var cssInterpreter = function() {};
+		if (config.example.less) {
+			css = config.example.less;
+			cssInterpreter = less;
+		} else if (config.example.sass) {
+			css = config.example.sass;
+			cssInterpreter = sass;
+		} else {
+			return;
+		}
 
-		return gulp.src(config.example.src + '/' + config.example.less)
-			.pipe(less())
+		return gulp.src(config.example.src + '/' + css)
+			.pipe(cssInterpreter())
 			.pipe(gulp.dest(config.example.dist))
 			.pipe(connect.reload());
 	});
@@ -150,15 +161,19 @@ module.exports = function (gulp, config) {
 			return config.example.src + '/' + i;
 		}), ['build:example:files']);
 
-		var watchLESS = [];
+		var watchCSS = [];
 		if (config.example.less) {
-			watchLESS.push(config.example.src + '/' + config.example.less);
+			watchCSS.push(config.example.src + '/' + config.example.less);
+		} else if (config.example.sass) {
+			watchCSS.push(config.example.src + '/' + config.example.sass);
 		}
 
 		if (config.component.less && config.component.less.path) {
-			watchLESS.push(config.component.less.path + '/**/*.less');
+			watchCSS.push(config.component.less.path + '/**/*.less');
+		} else if (config.component.sass && config.component.sass.path) {
+			watchCSS.push(config.component.sass.path + '/**/*.scss');
 		}
 
-		gulp.watch(watchLESS, ['build:example:css']);
+		gulp.watch(watchCSS, ['build:example:css']);
 	});
 };