Gulp: Jak korzystać z Browsersync, Sourcemaps, Autoprefixer i CSS Cleaner?

Question

Zobacz poniżej. Problem z moim obecnym kodem polega na tym, że Sourcemaps nie są wstrzykiwane za pomocą Browsersync. Czy tu coś pomijam lub robię to w niewłaściwy sposób?

Dla porównania: https://www.browsersync.io/docs/gulp/#gulp-sass-maps

// requirements 
var gulp   = require('gulp'); 
var sass   = require('gulp-ruby-sass'); 
var browserSync = require('browser-sync').create(); 
var prefix  = require('gulp-autoprefixer'); 
var rename  = require('gulp-rename'); 
var sourcemaps = require('gulp-sourcemaps'); 
var cssclean  = require('gulp-clean-css'); 

// create sass tasks 
gulp.task('sass', function() { 
    return sass('assets/scss/style.scss', {sourcemap: true, style: 'compact'}) 
    .on('error', function (err) { 
     console.error('Error!', err.message); 
    }) 
    .pipe(rename({suffix: '.min'})) 
    .pipe(cssclean()) 
    .pipe(prefix("last 2 versions", "> 1%", "ie 8", "Android 2", "Firefox ESR")) 
    .pipe(sourcemaps.write('.')) 
    .pipe(gulp.dest('assets/styles')) 
    .pipe(browserSync.stream({match: '**/*.css'})) 
}); 

gulp.task('serve', ['sass'], function() { 

    browserSync.init({ 
    proxy: "localhost/portfolio2014", 
    open:false 
    }); 

    gulp.watch("assets/scss/**/*.scss", ['sass']); 
    gulp.watch(["assets/styles/*.css", "site/**/*", "content/**/*", "assets/javascript/*.js"]).on('change', browserSync.reload); 
}); 

// default task (just run gulp) 
gulp.task('default', ['serve']); 

Answer 1

Czy trzeba używać gulp-ruby-sass? Poniższy plik gulpfile.js dodaje zmienne sourcemaps z gulp-sass i aktualizuje przeglądarkę podczas zapisywania plików .scss z plikami typu sourcemaps.

 var gulp = require('gulp'); 
     var sass = require('gulp-sass'); 
     var browserSync = require('browser-sync').create(); 
     var prefix = require('gulp-autoprefixer'); 
     var rename = require('gulp-rename'); 
     var sourcemaps = require('gulp-sourcemaps'); 
     var cssclean = require('gulp-clean-css'); 

     // create sass tasks 
     gulp.task('sass', function() { 
      return gulp.src('assets/scss/test.scss') 
       .pipe(sourcemaps.init()) 
       .pipe(sass()) 
       .pipe(rename({ suffix: '.min' })) 
       .pipe(cssclean()) 
       .pipe(prefix("last 2 versions", "> 1%", "ie 8", "Android 2", "Firefox ESR")) 
       .pipe(sourcemaps.write('')) 
       .pipe(gulp.dest('assets/styles')) 
       .pipe(browserSync.stream({ match: '**/*.css' })) 
       .on('error', function (err) { 
        console.error('Error!', err.message); 
       }); 
     }); 

     gulp.task('serve', ['sass'], function() { 

      browserSync.init({ 
       proxy: "localhost/portfolio2014", 
       open: false 
      }); 

      gulp.watch("assets/scss/**/*.scss", ['sass']); 
      gulp.watch(["assets/styles/*.css", "assets/javascript/*.js"]).on('change', browserSync.reload); 
     }); 

     // default task (just run gulp) 
     gulp.task('default', ['serve']);