gulp.js: Using 'debug_info' on gulp-sass

Question

I'm trying to get the line numbers of my SASS file in to my compiled CSS file. According to docs I must set debug_info to true, but is not working at all.

// Styles
gulp.task('styles', function() {
  return gulp.src('src/sass/**/*.scss')
    .pipe(sass({errLogToConsole: true}))
    .pipe(sass({ style: 'expanded', debug_info: true }))
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
    .pipe(gulp.dest('build/dev/css'))
    .pipe(minifyCSS())
    .pipe(gulp.dest('build/production/css'));
});

Anyone know if this is possible using gulp-sass plugin?

Answer 1

It is possible for gulp-sass , I would say that what SteveLacy points out is the solution you where looking for.

In your code it would look like this:

// Styles
gulp.task('styles', function() {
 return gulp.src('src/sass/**/*.scss')
   .pipe(sass({errLogToConsole: true}))
   .pipe(sass({ 
      style: 'expanded',
      sourceComments: 'normal'
    }))
   .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
   .pipe(gulp.dest('build/dev/css'))
   //.pipe(minifyCSS())
   .pipe(gulp.dest('build/production/css'));
});

Note that gulp-minify-css will strip any comments added by gulp-sass, so I commented it.

Answer 2

gulp-sass uses node-sass as it's SASS compiler.

Referring to the node-sass Docs, it does not have a 'debug_info'. Rather it has source comments / maps which is probably not what you are going for.

There is an open issue regarding line numbers: https://github.com/andrew/node-sass/issues/196

Answer 3

you can use gulp-ruby-sass. I use it in my projects with debug infos and line numbers:

var sass = require('gulp-ruby-sass');
...
// Styles for Development (Watch-Process)
gulp.task('styles-dev', function() {
  return gulp.src('src/styles/main.scss')
    .pipe(sass({
        debugInfo   : true,
        lineNumbers : true,
        loadPath    : 'src/styles',
        style       : 'expanded'
    }))
    .pipe(gulp.dest('dist/styles'));
});
...

Ciao Ralf