gulpgulp-sassgulp-ruby-sass

Gulp-sass or gulp-ruby-sass on win7, resolving syntax/dependency issues


So, like many people new to Gulp I'm struggling getting gulp-sass or gulp-ruby-sass working properly on my development machine (win7, xampp, drupal).

My question is pretty simple: how can I get sass compilation with livereload to my browser?

I can confirm that my SASS compiles correctly using compass-watch or bundle exec guard, but the regular livereload set up with Omega4 on drupal is painfully slow. It was suggested that I look into gulp/grunt, so I did, and chose gulp due to it's reported ease of configuration

I have also correctly installed gulp at the root of my webserver and I can call the few functions in my gulp file via the command line individually or as the whole file via gulp.

The issue I have is that neither gulp-sass, nor gulp-ruby-sass will work!

With gulp-ruby-sass I get the arguments to path.join must be strings error. The error happens at the second line of this function:

gulp.task('styles', function() {
    return sass('postercatalogue/sites/all/themes/postomega/sass/**/*.scss', {style:'expanded'})
    .pipe(sass({bundleExec: true, require: "sass-globbing"}))
    .pipe(gulp.dest('./css'))
    .pipe(livereload());
    });

With gulp-sass, I get an error file to import not found or unreadable: variables/**/*

 gulp.task('styles', function() {
    gulp.src('postercatalogue/sites/all/themes/postomega/sass/**/*.scss', {style:'expanded'})
        .pipe(sass({bundleExec: true, require: "sass-globbing"}))
        .pipe(gulp.dest('./css'))

This error also occurs at the the src/return sass line. I know the syntax between versions of gulp-ruby-sass changed, but none of the new syntax changes worked for me, and gulp-sass shouldn't have issues with file globbing(?!).

I'm at a loss as to which combination of dependencies or syntax I need to get this going.

For reference, here is my gulpfile and dependencies for reference.

var gulp = require('gulp');
//var sass = require('gulp-sass');
var sass = require('gulp-ruby-sass');
var maps = require('gulp-sourcemaps');
var livereload = require('gulp-livereload');
gulp.task('styles', function() {
    return sass('postercatalogue/sites/all/themes/postomega/sass/**/*.scss', {style:'expanded'})
    .pipe(sass({bundleExec: true, require: "sass-globbing"}))
    .pipe(gulp.dest('./css'))
    .pipe(livereload());
    });
gulp.task('watch', function(){
    livereload.listen();
    gulp.watch('sass/**/*.scss',['styles']);
    });
gulp.task('default',['styles','watch']);

{
  "name": "postercatalogue",
  "version": "0.1.0",
  "devDependencies": {
    "gulp": "^3.9.0",
    "gulp-connect": "^2.2.0",
    "gulp-livereload": "^3.8.0",
    "gulp-ruby-sass": "^1.0.5",
    "gulp-sass": "^2.0.1",
    "gulp-sourcemaps": "^1.5.2"
  }
}

Thanks in advance.


Solution

  • This was solved by with using gulp-ruby-sass with the correct src syntax and making sure that the params "bundleExec: true, compass: true, require: "sass-globbing"