Gulp: Nasıl birlikte Browsersync, Sourcemaps, Autoprefixer ve CSS Cleaner kullanılır?

Question

aşağıya bakınız. Benim şimdiki koduyla yaşıyorum sorun Sourcemaps Browsersync yoluyla enjekte sakın olmasıdır. Burada bir şey eksik mi ya da yanlış şekilde mi yapıyorum? Başvuru için

: 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

Eğer gulp-ruby-sass kullanmak zorunda mıyım? gulpfile.js aşağıda gulp-sass ile sourcemaps ekleme ve sourcemaps ile .scss dosyaları kaydederken tarayıcı güncelliyor. Yardım için

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