gulp-sass error: Unhandled stream error in pipe

Question

I'm using gulp-sass and I get the following errors:

ESL@eslmbp /Applications/MAMP/htdocs/craigpomranz[master*]$ gulp sass
[17:54:53] Using gulpfile /Applications/MAMP/htdocs/craigpomranz/gulpfile.js
[17:54:53] Starting 'sass'...

stream.js:94
      throw er; // Unhandled stream error in pipe.
            ^
Error in plugin 'gulp-sass'
/Applications/MAMP/htdocs/craigpomranz/wp-content/themes/craig/scss/partials/base:13: error: error reading values after 'xsmall'

    at opts.error (/Applications/MAMP/htdocs/craigpomranz/node_modules/gulp-sass/index.js:67:17)
    at onError (/Applications/MAMP/htdocs/craigpomranz/node_modules/gulp-sass/node_modules/node-sass/sass.js:73:16)

Here's my gulpfile.js:

// Include gulp
var gulp = require('gulp'); 

// Include Our Plugins
var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
//var sass = require('gulp-ruby-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var minify = require('gulp-minify-css');
var browserSync = require('browser-sync');
var rename = require('gulp-rename');

var theme_path = 'wp-content/themes/craig/';

// Compile Our Sass
gulp.task('sass', function() {
    return gulp.src(theme_path+'scss/main.scss')
        .pipe(sass())
        // .pipe(minify({keepBreaks:true}))
        .pipe(minify())
        //.pipe(rename('style.css'))
        .pipe(gulp.dest(theme_path));
});

The same scss (files) compile fine with: sass --watch path/to/main.scss --compressed

I tried with another plugin (gulp-ruby-sass) and it threw a different error.

What am I doing wrong?

Update The error message mentions line 13 in _base.scss. Here is the contents of that file:

//Setting breakpoints
$xsmall : 400px; 
$small : 768px; //phones
$medium : 1024px; //tablets
$breakpoints: ( 
    'xsmall' :'(max-width: #{$xsmall})',  //<--HERE IS LINE 13
    'small': '(max-width: #{$small})',
    // 'small': '(min-width: #{$xsmall+1}) and (max-width: #{$small})',
    'medium': '(min-width: #{$small+1}) and (max-width: #{$medium})',
    'large': '(min-width: #{$medium + 1})' 
);

Is it because you have used , rather than ; to separate the elements within $breakpoints ?? — Oam Psy
The space after 'xsmall' and before the colon might be fooling the parser into thinking it has a list (not a map) since space is a valid separator in a list. — David Gilbertson

Oliver Tappin Oliver Tappin · Accepted Answer · 2014-09-04T17:30:50

gulp-sass doesn't support maps, try using your commented out gulp-ruby-sass.

What will be supported is lists:

$breakpoint-keys: (
    'key_a',
    'key_b',
    'key_c'
);

$breakpoint-values: (
    'value_a',
    'value_b',
    'value_c'
);

But as you'll see, these are one-dimensional. However maps (new in SASS 3.3.0, 7 March 2014) will allow you to use keys which will let you use the syntax you are currently using:

$breakpoints: ( 
    'key_a' : 'value_a',
    'key_b' : 'value_b',
    'key_c' : 'value_c' 
);

For more information about lists and maps, refer to this article: http://viget.com/extend/sass-maps-are-awesome

gulp-sass error: Unhandled stream error in pipe

1 Answers