Not working with gulp-sass

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!

+1

@realph

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?

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 ':'

@realph

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

@holic

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

@sandhilt

@sandhilt That seems to have fixed it. Thanks!

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.

@holic

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

@sandhilt

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

@gligoran

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

@joshtoo

@joshtoo how did you get it to work?

@TheAggressive

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

@joshtoo

@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?

@TheAggressive

@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));

});

@joshtoo

@joshtoo Thanks!!

@TheAggressive

@TheAggressive No problem :)

Prevent break of gulp task on SASS errors

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())
})

Navigation Menu

Repository navigation

Not working with gulp-sass #32

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Not working with gulp-sass #32

Description

Activity

JoshLipps commented on May 22, 2015

floatdrop commented on May 27, 2015

realph commented on May 27, 2015

frolic commented on May 28, 2015

sandhilt commented on May 28, 2015

realph commented on Jun 6, 2015

silvenon commented on Jun 12, 2015

joshwiens commented on Sep 22, 2015

gligoran commented on Sep 23, 2015

joshwiens commented on Sep 23, 2015

TheAggressive commented on Oct 2, 2015

joshwiens commented on Oct 3, 2015

TheAggressive commented on Oct 3, 2015

joshwiens commented on Oct 3, 2015

TheAggressive commented on Oct 3, 2015

joshwiens commented on Oct 3, 2015

alextrastero commented on Nov 12, 2017

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions