0

I have problem with my Gulp task for Sass. This not generate sourcemaps. Problem is only this task, sourcemaps for my .js works fine.

Anybody can check my task?

gulp.task('build-css', function () {
    gulp.src(['src/scss/vendor.scss', 'src/scss/styles.scss'])
        .pipe(plumber())
        .pipe(sourcemaps.init({loadMaps: true}))
        .pipe(sass.sync())
        .pipe(sourcemaps.write())        
        .pipe(concatCss("main.css"))  
        .pipe(autoprefixer({browsers: ['last 10 versions', 'IE 10']}))            
        .pipe(gulp.dest('build/css/'))
        .pipe(browserSync.stream());
});
Janusz Pawlacz
  • 1
  • 1

1 Answers1

1

"teach a man to fish" kind of answer :). You can try debuging this simple script by using Debugging By Backtracking method:

Debugging by Backtracking

For small applications, the process of backtracking is frequently used efficiently in identifying bugs. To apply this process, begin at the position in the application wherever a wrong output was generated and go backwards in the application one step at a instance, spiritually debugging the application in backward sequence, to obtain the status of the application at the preceding step. Enduring in this manner, the bug is restricted among the position where the status of the application was what was anticipated and the initial position where the situation was not what was predictable.

Applying this method would mean removing line by line until you discover the bugged pipe. In this case that would be gulp-concat-css plugin which is not handling your sourcemaps updates correctly.

If you need concatination go with generic gulp-concat plugin that works well with js and css files, so replace that line with:

.pipe(concat('main.css'))

Also i prefer external map files so i can exclude them from deployment on production server and in general save on .css file size that you need deployed on production.

You can do that with: 

.pipe(sourcemaps.write('./))

Hope it helps.

Marko Manojlovic
  • 356
  • 1
  • 10