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.
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"