Removing the need for Ruby sass

Author: Donovan Hutchinson

gulpfile.js

@@ -1,5 +1,5 @@
 var gulp = require('gulp'),
-    sass = require('gulp-ruby-sass'),
+    sass = require('gulp-sass'),
     autoprefixer = require('gulp-autoprefixer'),
     minifycss = require('gulp-minify-css'),
     jshint = require('gulp-jshint'),
@@ -14,8 +14,10 @@ var gulp = require('gulp'),
     cssshrink = require('gulp-cssshrink'),
     cp = require('child_process');
 
+
 gulp.task('styles', function() {
-  return sass(['src/sass/screen.scss'], { style: 'expanded' })
+  gulp.src('./src/sass/**/*.scss')
+    .pipe(sass().on('error', sass.logError))
     .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
     .pipe(gulp.dest('public/stylesheets'))
     .pipe(rename({suffix: '.min'}))
@@ -25,13 +27,6 @@ gulp.task('styles', function() {
     .pipe(browserSync.reload({stream:true}));
 });
 
-/*
-gulp.task('sass', function() {
-    return sass('path/to/scss', { style: 'expanded' })
-        .pipe(gulp.dest('path/to/css'));
-});
-*/
-
 gulp.task('scripts', function() {
   return gulp.src(['./src/javascripts/**/*.js'])
     //.pipe(jshint('.jshintrc'))
@@ -45,13 +40,6 @@ gulp.task('scripts', function() {
     .pipe(browserSync.reload({stream:true}));
 });
 
-gulp.task('clean', function(cb) {
-  del([
-    'stylesheets',
-    'javascripts'
-  ], cb);
-});
-
 gulp.task('browser-sync', ['styles', 'scripts'], function() {
   browserSync({
     server: {
@@ -70,6 +58,6 @@ gulp.task('watch', function() {
   gulp.watch('src/javascripts/*.js', ['scripts', browserSync.reload]);
 });
 
-gulp.task('default', ['clean'], function() {
+gulp.task('default', function() {
     gulp.start('styles', 'scripts', 'browser-sync', 'watch');
 });

package.json

@@ -23,8 +23,7 @@
     "gulp-notify": "^1.8.0",
     "gulp-plumber": "^0.6.4",
     "gulp-rename": "^1.2.0",
-    "gulp-ruby-sass": "^1.0.1",
-    "gulp-sass": "^1.3.3",
+    "gulp-sass": "^2.0.1",
     "gulp-uglify": "^0.3.2"
   }
 }

public/stylesheets/screen.css

@@ -1,8 +1,7 @@
 /* Your styles (and Sass) start here */
 /*** Example styles ***/
 body {
-  background: #36a1d9;
-}
+  background: #36a1d9; }
 
 h1 {
   -webkit-transition: all 3s ease-out;
@@ -22,57 +21,46 @@ h1 {
   color: white;
   color: rgba(255, 255, 255, 0.8);
   text-align: center;
-  text-transform: uppercase;
-}
+  text-transform: uppercase; }
 
 h1:hover {
-  color: #5cefaf;
-}
+  color: #5cefaf; }
 
 /*** Keyframes - used with the "animation" property in the h1 ***/
 @-webkit-keyframes pulsate {
   0%, 20% {
     -webkit-transform: translate(-50%, -50%) scale(1);
             transform: translate(-50%, -50%) scale(1);
     -webkit-filter: blur(5px);
-            filter: blur(5px);
-  }
+            filter: blur(5px); }
   50%, 70% {
     -webkit-transform: translate(-50%, -50%) scale(1.5);
             transform: translate(-50%, -50%) scale(1.5);
     -webkit-filter: none;
-            filter: none;
-  }
+            filter: none; }
   100% {
     -webkit-transform: translate(-50%, -50%) scale(1);
             transform: translate(-50%, -50%) scale(1);
     -webkit-filter: blur(5px);
-            filter: blur(5px);
-  }
-}
+            filter: blur(5px); } }
 @keyframes pulsate {
   0%, 20% {
     -webkit-transform: translate(-50%, -50%) scale(1);
             transform: translate(-50%, -50%) scale(1);
     -webkit-filter: blur(5px);
-            filter: blur(5px);
-  }
+            filter: blur(5px); }
   50%, 70% {
     -webkit-transform: translate(-50%, -50%) scale(1.5);
             transform: translate(-50%, -50%) scale(1.5);
     -webkit-filter: none;
-            filter: none;
-  }
+            filter: none; }
   100% {
     -webkit-transform: translate(-50%, -50%) scale(1);
             transform: translate(-50%, -50%) scale(1);
     -webkit-filter: blur(5px);
-            filter: blur(5px);
-  }
-}
+            filter: blur(5px); } }
+
 /*** Media queries for adjusting to different screen sizes ***/
 @media only screen and (max-width: 600px) {
   h1 {
-    font-size: 2em;
-  }
-}
+    font-size: 2em; } }

public/stylesheets/screen.min.css

@@ -1,8 +1,7 @@
 /* Your styles (and Sass) start here */
 /*** Example styles ***/
 body {
-  background: #36a1d9;
-}
+  background: #36a1d9; }
 
 h1 {
   -webkit-transition: all 3s ease-out;
@@ -22,57 +21,46 @@ h1 {
   color: white;
   color: rgba(255, 255, 255, 0.8);
   text-align: center;
-  text-transform: uppercase;
-}
+  text-transform: uppercase; }
 
 h1:hover {
-  color: #5cefaf;
-}
+  color: #5cefaf; }
 
 /*** Keyframes - used with the "animation" property in the h1 ***/
 @-webkit-keyframes pulsate {
   0%, 20% {
     -webkit-transform: translate(-50%, -50%) scale(1);
             transform: translate(-50%, -50%) scale(1);
     -webkit-filter: blur(5px);
-            filter: blur(5px);
-  }
+            filter: blur(5px); }
   50%, 70% {
     -webkit-transform: translate(-50%, -50%) scale(1.5);
             transform: translate(-50%, -50%) scale(1.5);
     -webkit-filter: none;
-            filter: none;
-  }
+            filter: none; }
   100% {
     -webkit-transform: translate(-50%, -50%) scale(1);
             transform: translate(-50%, -50%) scale(1);
     -webkit-filter: blur(5px);
-            filter: blur(5px);
-  }
-}
+            filter: blur(5px); } }
 @keyframes pulsate {
   0%, 20% {
     -webkit-transform: translate(-50%, -50%) scale(1);
             transform: translate(-50%, -50%) scale(1);
     -webkit-filter: blur(5px);
-            filter: blur(5px);
-  }
+            filter: blur(5px); }
   50%, 70% {
     -webkit-transform: translate(-50%, -50%) scale(1.5);
             transform: translate(-50%, -50%) scale(1.5);
     -webkit-filter: none;
-            filter: none;
-  }
+            filter: none; }
   100% {
     -webkit-transform: translate(-50%, -50%) scale(1);
             transform: translate(-50%, -50%) scale(1);
     -webkit-filter: blur(5px);
-            filter: blur(5px);
-  }
-}
+            filter: blur(5px); } }
+
 /*** Media queries for adjusting to different screen sizes ***/
 @media only screen and (max-width: 600px) {
   h1 {
-    font-size: 2em;
-  }
-}
+    font-size: 2em; } }