Not working with gulp-sass

[realph]

My terminal still returns an error and breaks my task when there's an error in my Sass. This is what my task looks like:

gulp.task('sass', function() {
  return gulp.src(['./src/scss/*.scss', './src/scss/**/*.scss'])
    .pipe(plumber())
    .pipe(sass({
      includePaths : [
        './lib/basscss/scss',
        './lib/fluidbox/css'
      ],
      outputStyle: 'expanded'
    }))
    .pipe(prefix({
      browsers: ['last 2 versions'],
      cascade: false
    }))
    .pipe(minifyCSS())
    .pipe(gulp.dest('./_site/public/css'))
    .pipe(gzip())
    .pipe(gulp.dest('./_site/public/css'))
    .pipe(reload({stream: true}))
});

Any idea why it keeps breaking? Any help is appreciated. Thanks in advance!

[JoshLipps]

+1

[floatdrop]

Good news - there is nothing wrong in gulp-sass code, bad news - I have no idea, why error is not watched by plumber.

@realph could you remove all plugins below sass, run and post output?

[realph]

So when I remove all the plugins below gulp-sass, like so:

gulp.task('sass', function() {
  return gulp.src(['./src/scss/*.scss', './src/scss/**/*.scss'])
    .pipe(plumber())
    .pipe(sass({
      includePaths : [
        './lib/basscss/scss',
        './lib/fluidbox/css'
      ],
      outputStyle: 'expanded'
    }))
});

I still get the same error message, when I deliberately make errors in my CSS. Plumber doesn't seem to be working.

Error in plugin 'gulp-sass'
Message:
    src/scss/components/_cover.scss
  30:3  property "background-i" must be followed by a ':'
Details:
    column: 3
    line: 30
    file: /Volumes/Boba/Work/Sites/realph/src/scss/components/_cover.scss
    status: 1
    messageFormatted: src/scss/components/_cover.scss
  30:3  property "background-i" must be followed by a ':'

[holic]

@realph Try calling gulp-sass with sass.sync instead of sass.

See https://github.com/dlmanning/gulp-sass/wiki/Common-Issues-and-Their-Fixes#gulp-watch-stops-working-on-an-error for an explanation.

[sandhilt]

@holic You're right! @realph keep code but remove return. gulp.task('sass', function() { gulp.src(...) .pipe(plumber()) .pipe(sass({...})); });

[realph]

@SandHilt That seems to have fixed it. Thanks!

[silvenon]

Hm, it's best to use sync when not returning the stream then, I guess? Otherwise I sometimes get some weird errors because my styles task didn't finish yet.

[joshwiens]

@holic - GG worked like a charm after your suggestion to "rtfm" :)

[gligoran]

@SandHilt, @realph : Just be aware that removing return before gulp.src will cause task dependencies to not work as they should. While a dependent task will wait for its dependencies, those dependencies will seem to end before they're actually done. If you have the return dependent task will actually wait for all the streams to end before running.

[joshwiens]

@gligoran - Yeah and that ended up not being an option for me. I managed to get it working with the return statement after a bit of dinking around.

[TheAggressive]

@joshtoo how did you get it to work?

[joshwiens]

@TheAggressive - If you can point me to a repo i'll take a look at your gulp build.

[TheAggressive]

@joshtoo I got it to work this way:

gulp.task('sass', function() {
  return gulp.src('scss/style.scss')
    .pipe(plumber())
    .pipe(sass.sync({ // Have to use sass.sync - See Issue (https://github.com/dlmanning/gulp-sass/issues/90)
      outputStyle: 'compressed',
      errLogToConsole: true
    }))
    .pipe(autoprefixer({
      browsers: ['last 2 versions', 'ie >= 9']
    }))
    .pipe(gulp.dest('./'));
});

would that do the trick?

[joshwiens]

@TheAggressive

var $ = require('gulp-load-plugins')({lazy: true}); // John Papa tip for shortening the require list

gulp.task('sass', ['clean-sass'], function() {
    log('SASS Compilation ==> CSS3');

    return gulp
        .src(conf.sass)
        .pipe($.plumber())
        .pipe($.sass())
        .on('error', $.sass.logError)
        .pipe($.autoprefixer({browsers: ['last 2 version', '> 5%']}))
        .pipe(gulp.dest(conf.tempDir));

});

[TheAggressive]

@joshtoo Thanks!!

[joshwiens]

@TheAggressive No problem :)

[alextrastero]

Removing return worked for me

// before
gulp.task('sass', function () {
  return gulp.src(config.sass.input)
    .pipe(plumber())
    .pipe(sass())
})
// after
gulp.task('sass', function () {
  gulp.src(config.sass.input)
    .pipe(plumber())
    .pipe(sass())
})