Gulp error when creating sourcemap ("CssSyntaxError")

Question

I can't figure out what I'm doing wrong here. I'm getting a really odd error message when I try and create a sourcemap file using Gulp.

events.js:85
      throw er; // Unhandled 'error' event
            ^
CssSyntaxError: /www/static/sass/maps/main.css.map:1:198: Missed semicolon

I want them to be created in a separate .map file. I cannot understand why it's telling me there's an error in the file I've asked it to create...?

What am I doing wrong?

Here's my gulpfile.js:

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    minifyCSS = require('gulp-minify-css'),
    autoprefixer = require('gulp-autoprefixer'),
    sourcemaps = require('gulp-sourcemaps'),
    input = 'static/sass/**/*.scss',
    output = 'static/css';

var sassOptions = {
    errLogToConsole: true,
    outputStyle: 'expanded'
};

gulp.task('sass', function() {
    return gulp
        .src(input)
        .pipe(sourcemaps.init())
        .pipe(sass(sassOptions).on('error', sass.logError))
        .pipe(sourcemaps.write('.'))
        .pipe(autoprefixer())
        .pipe(minifyCSS())
        .pipe(gulp.dest(output))
});

gulp.task('watch', function() {
    gulp.watch(input, ['sass']);
});

// Default task - Compile then set Watch
gulp.task('default', ['sass', 'watch']);

Why are you placing your source maps onto the production server at all? — cimmanon
– cimmanon, Commented Oct 23, 2015 at 12:46
@cimmanon I'm not placing my sourcemaps on any production server. What gave you that idea? — Chuck Le Butt
– Chuck Le Butt, Commented Oct 23, 2015 at 13:51
You did: "I want them to be created in a separate .map file so the average user won't see them when visiting the site". Why would the average user see the source map at all, unless it was on the production server? — cimmanon
– cimmanon, Commented Oct 23, 2015 at 13:52
@cimmanon By default the sourcemap is included inline within the CSS. I just want to separate it so I don't have to modify my gulpfile and recompile (for a sourcemap-less version) before every deployment. — Chuck Le Butt
– Chuck Le Butt, Commented Oct 23, 2015 at 13:53

Chuck Le Butt · Accepted Answer · 2016-04-20 11:08:16Z

31

It turns out it was simply the placement of the line .pipe(sourcemaps.write('.')). Moving it solved the problem:

return gulp
    .src(input)
    .pipe(sourcemaps.init())
    .pipe(sass(sassOptions).on('error', sass.logError))
    .pipe(autoprefixer())
    .pipe(minifyCSS())
    .pipe(sourcemaps.write('.')) // This line moved to here
    .pipe(gulp.dest(output))

Would love to know why :-/

edited Apr 20, 2016 at 11:08

answered Oct 23, 2015 at 14:00

Chuck Le Butt

49k62 gold badges213 silver badges299 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jorre Over a year ago

same here, but no idea why the sourcemaps need to be in the end

Eddie Hong Over a year ago

@Jorre I believe sourcemaps.write() needs to come after autoprefixer() because autoprefixer attempts to add prefixes to the source map, which causes the error

Chuck Le Butt Over a year ago

@EddieHong Ah! Thank you for explaining that! It makes perfect sense.

gyozo kudor Over a year ago

Can you explain why sourcemaps.write needs to be at the end?

Collectives™ on Stack Overflow

Gulp error when creating sourcemap ("CssSyntaxError")

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related