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