Gulp: How to use Browsersync, Sourcemaps, Autoprefixer and CSS Cleaner together?

Question

See below. The problem with my current code is that Sourcemaps are not entered through the browser. Am I missing something here or did it wrong?

For reference: 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

Do you need to use gulp-ruby-sass ? Below gulpfile.js adds the source files with gulp-sass and updates the browser when saving .scss files with source maps.

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