Gulp.js with foundation / compass

Question

Has anyone successfully gotten Gulp-sass to work with foundation 4/5 (with compass preferably?)

The application is using foundation 4 successfully, without gulp, using compass watch. But I want to start using gulp to streamline my sass/coffee/minification compilation.

Here is my gulpfile.js

var gulp   = require('gulp'),
    util   = require('gulp-util'),
    sass   = require('gulp-sass'),
    coffee = require('gulp-coffee');

var paths = {
    scripts: {
        src:  'src/coffee/**/*.coffee',
        dest: 'public/javascripts'
    },
    styles: {
        src:  'src/sass/*.sass',
        dest: 'public/stylesheets'
    }
};

gulp.task('scripts', function() {
    return gulp.src(paths.scripts.src)
        .pipe(coffee())
        .pipe(gulp.dest(paths.scripts.dest));
});

gulp.task('sass', function () {
   return gulp.src(paths.styles.src)
        .pipe(sass({errLogToConsole: true}))
        .pipe(gulp.dest(paths.styles.dest));
});

gulp.task('watch', function () {
  gulp.watch(paths.scripts.src, ['scripts']);
  gulp.watch(paths.styles.src, ['sass']);
});

gulp.task('default', ['scripts', 'sass', 'watch']);

This works great for the coffee script compilation, but fails at the commented line, when it comes to sass/compass.

[gulp] Using file path/gulpfile.js
[gulp] Working directory changed to path
[gulp] Running 'scripts'...
[gulp] Running 'sass'...
[gulp] Running 'watch'...
[gulp] Finished 'watch' in 15 ms
[gulp] [gulp-sass] source string:1: error: @import directive requires a url or quoted path
// Here is what's throwing me for a loop. I'm assuming that it has something to do with
// gulp-sass not utilizing the ruby gem's source files for zurb-foundation/compass
[gulp] Finished 'sass' in 115 ms
[gulp] Finished 'scripts' in 122 ms
[gulp] Running 'default'...
[gulp] Finished 'default' in 11 μs

Is there a way around this, or is my best bet to upgrade from 4 to 5 and add the foundation files in my src/coffee, so it doesn't have to rely on looking in my .rvm/../gems folder??

Answer 1

Try gulp-compass instead of gulp-sass.

EDIT

Let me apologize for my poor answer first.

I tested gulp-compass by myself and it worked. I'm not sure about your Foundation setup but what I picked was Using Foundation With Compass on Getting Started on SASS.

The relevant part of my gulpfile.js is:

var compass = require('gulp-compass');

var paths = {
  styles: {
    src:  'scss/*.scss',
    dest: 'stylesheets'
  }
};

gulp.task('sass', function () {
  return gulp.src(paths.styles.src)
    .pipe(compass({
      config_file: './config.rb',
      css: 'stylesheets',
      sass: 'scss'
    }))
    .pipe(gulp.dest(paths.styles.dest));
});

The example above has a different directory structure from yours. So, your gulpfile.js would be:

var compass = require('gulp-compass');

var paths = {
  styles: {
    src:  'src/sass/*.sass',
    dest: 'public/stylesheets'
  }
};

gulp.task('sass', function () {
  return gulp.src(paths.styles.src)
    .pipe(compass({
      config_file: './config.rb',
      css: 'stylesheets',
      sass: 'sass'
    }))
    .pipe(gulp.dest(paths.styles.dest));
});

For the options for 'compass()', 'css' should be your 'css_dir' in your 'config.rb' and 'sass' for 'sass_dir' as described in the README of gulp-compass.

Hope it will work for you.