I have the following gulp task:
var gulp = require('gulp'),
sass = require('gulp-ruby-sass'),
autoprefixer = require('gulp-autoprefixer');
gulp.src('html/css/sass/*.scss')
.pipe(sass({
style: 'compressed',
loadPath: 'plugin/css/sass',
sourcemap: true,
sourcemapPath: '/css/sass',
container : 'local_sass'
}))
.pipe(autoprefixer())
.pipe(gulp.dest('html/css'));
The problem I'm having is the SASS compiler is properly generating the sourcemaps and adding the sourcemap comment, but then autoprefixer removes the comment (and I don't think it's updating the sourcemaps either).
I've tried removing autoprefixer and it works perfectly, but when I put it back in, they comment is removed. I also tried adding { map: true }
, but then each sourcemap just has the name to.css.map
. I also tried adding from
and to
but I don't know how to do tell it current filename so it always writes to the same filename.
How would I go about getting autoprefixer to co-operate and update the sourcemaps? Is there another plugin I need to use?
Packages:
"gulp": "~3.8.6",
"gulp-autoprefixer": "~0.0.8",
"gulp-ruby-sass": "~0.7.0",
You can use gulp-sourcemaps if you switch to gulp-sass
. Both gulp-sass
and gulp-autoprefixer
support gulp sourcemaps.
Implementation would look something like:
var gulp = require('gulp');
var gulpSass = require('gulp-sass');
var gulpAutoprefixer = require('gulp-autoprefixer');
var sourcemaps = require('gulp-sourcemaps');
gulp.task('javascript', function() {
gulp.src('src/**/*.scss')
.pipe(sourcemaps.init())
.pipe(gulpSass())
.pipe(gulpAutoprefixer())
.pipe(sourcemaps.write('../maps'))
.pipe(gulp.dest('dist'));
});
Which would write .map files in a maps directory.
Note: All manipulations from source .scss to target .css must be in the stream between sourcemaps.init()
and sourcemaps.write()
. This includes any minification such as gulp-uglify
, which also supports gulp-sourcemaps
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With