Reduce to a single S/CSS task and watcher

- Outputs all Sass / CSS to .tmp
- Only compiles Sass files in the folder root Sass directory and those named
  specifically. In order for `changed` to work, users should only add files that
  have output files to their styles task, and let gulp-ruby-sass figure out the
  dependencies.w

gulpfile.js

@@ -74,46 +74,26 @@ gulp.task('fonts', function () {
     .pipe($.size({title: 'fonts'}));
 });
 
-// Automatically Prefix CSS
-gulp.task('styles:css', function () {
-  return gulp.src('app/styles/**/*.css')
-    .pipe($.changed('app/styles'))
-    .pipe($.autoprefixer(AUTOPREFIXER_BROWSERS))
-    .pipe(gulp.dest('app/styles'))
-    .pipe($.size({title: 'styles:css'}));
-});
-
-// Compile Sass For Style Guide Components (app/styles/components)
-gulp.task('styles:components', function () {
-  return gulp.src('app/styles/components/components.scss')
-    .pipe($.rubySass({
+// Compile and Automatically Prefix Stylesheets
+gulp.task('styles', function () {
+  // For best performance, don't add Sass partials to `gulp.src`
+  return gulp.src([
+      'app/styles/*.scss',
+      'app/styles/**/*.css',
+      'app/styles/components/components.scss'
+    ])
+    .pipe($.changed('.tmp/styles', {extension: '.css'}))
+    .pipe($.if('*.scss', $.rubySass({
       style: 'expanded',
-      precision: 10,
-      loadPath: ['app/styles/components']
-    }))
-    .on('error', console.error.bind(console))
-    .pipe($.autoprefixer(AUTOPREFIXER_BROWSERS))
-    .pipe(gulp.dest('app/styles/components'))
-    .pipe($.size({title: 'styles:components'}));
-});
-
-// Compile Any Other Sass Files You Added (app/styles)
-gulp.task('styles:scss', function () {
-  return gulp.src(['app/styles/**/*.scss', '!app/styles/components/components.scss'])
-    .pipe($.rubySass({
-      style: 'expanded',
-      precision: 10,
-      loadPath: ['app/styles']
-    }))
+      precision: 10
+    })
     .on('error', console.error.bind(console))
+    ))
     .pipe($.autoprefixer(AUTOPREFIXER_BROWSERS))
     .pipe(gulp.dest('.tmp/styles'))
-    .pipe($.size({title: 'styles:scss'}));
+    .pipe($.size({title: 'styles'}));
 });
 
-// Output Final CSS Styles
-gulp.task('styles', ['styles:components', 'styles:scss', 'styles:css']);
-
 // Scan Your HTML For Assets & Optimize Them
 gulp.task('html', function () {
   return gulp.src('app/**/*.html')
@@ -151,7 +131,7 @@ gulp.task('html', function () {
 gulp.task('clean', del.bind(null, ['.tmp', 'dist']));
 
 // Watch Files For Changes & Reload
-gulp.task('serve', ['styles:components', 'styles:scss'], function () {
+gulp.task('serve', ['styles'], function () {
   browserSync({
     notify: false,
     // Run as an https by uncommenting 'https: true'
@@ -164,8 +144,7 @@ gulp.task('serve', ['styles:components', 'styles:scss'], function () {
   });
 
   gulp.watch(['app/**/*.html'], reload);
-  gulp.watch(['app/styles/**/*.scss'], ['styles:components', 'styles:scss']);
-  gulp.watch(['{.tmp,app}/styles/**/*.css'], ['styles:css', reload]);
+  gulp.watch(['app/styles/**/*.{scss,css}'], ['styles', reload]);
   gulp.watch(['app/scripts/**/*.js'], ['jshint']);
   gulp.watch(['app/images/**/*'], reload);
 });