Gulp: Wie Browsersync, Sourcemaps, Autoprefixer und CSS Cleaner zusammen verwenden?

Question

Siehe unten. Das Problem, das ich mit meinem aktuellen Code habe, ist, dass Quellmaps nicht über Browsersync injiziert werden. Fehle ich hier etwas oder mache ich es falsch?

Zum Vergleich: 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

Haben Sie gulp-ruby-sass verwenden? Die folgende gulpfile.js fügt Quellmaps mit gulp-sass hinzu und aktualisiert den Browser beim Speichern von .scss-Dateien mit Quellkarten.

 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']);