Gulp-sass with susy and sourcemaps - gulp

Question

I'm trying to get Susy to work with gulp-sass (libsass) and sourcemaps. It's the sourcemaps that seems to be the problem, since without them, everything works as it should. I tried adding the IncludePaths to the Sass task but that didn't help. Susy is installed with Bower and resides in assets/bower_components/susy.
The error I'm getting looks like this:
c:\Users\Devotee\hemsidor\vvv\www\new-project\htdocs\app\themes\bb2\node_mo
dules\gulp-minify-css\node_modules\vinyl-sourcemaps-apply\node_modules\source-ma
p\lib\source-map\source-map-consumer.js:415
throw new Error('"' + aSource + '" is not in the SourceMap.');
^
Error: "/bower_components/susy/sass/susy/language/susy/_container.scss" is not i
n the SourceMap.
at SourceMapConsumer_sourceContentFor [as sourceContentFor] (c:\Users\Devote
e\hemsidor\vvv\www\new-project\htdocs\app\themes\bb2\node_modules\gulp-mini
fy-css\node_modules\vinyl-sourcemaps-apply\node_modules\source-map\lib\source-ma
p\source-map-consumer.js:415:13)
at SourceMapGenerator.<anonymous> (c:\Users\Devotee\hemsidor\vvv\www\bb2-new
-homepage\htdocs\app\themes\bb2\node_modules\gulp-minify-css\node_modules\vinyl-
sourcemaps-apply\node_modules\source-map\lib\source-map\source-map-generator.js:
233:42)
at Array.forEach (native)
at SourceMapGenerator_applySourceMap [as applySourceMap] (c:\Users\Devotee\h
emsidor\vvv\www\new-project\htdocs\app\themes\bb2\node_modules\gulp-minify-
css\node_modules\vinyl-sourcemaps-apply\node_modules\source-map\lib\source-map\s
ource-map-generator.js:232:34)
at applySourceMap (c:\Users\Devotee\hemsidor\vvv\www\new-project\htdocs
\app\themes\bb2\node_modules\gulp-minify-css\node_modules\vinyl-sourcemaps-apply
\index.js:23:15)
at c:\Users\Devotee\hemsidor\vvv\www\new-project\htdocs\app\themes\bb2\
node_modules\gulp-minify-css\index.js:122:11
at c:\Users\Devotee\hemsidor\vvv\www\new-project\htdocs\app\themes\bb2\
node_modules\gulp-minify-css\index.js:42:7
at whenSourceMapReady (c:\Users\Devotee\hemsidor\vvv\www\new-project\ht
docs\app\themes\bb2\node_modules\gulp-minify-css\node_modules\clean-css\lib\clea
n.js:94:62)
at c:\Users\Devotee\hemsidor\vvv\www\new-project\htdocs\app\themes\bb2\
node_modules\gulp-minify-css\node_modules\clean-css\lib\clean.js:100:77
at fromString (c:\Users\Devotee\hemsidor\vvv\www\new-project\htdocs\app
\themes\bb2\node_modules\gulp-minify-css\node_modules\clean-css\lib\utils\input-
source-map-tracker.js:25:10)
Sorry for the horrible formatting (Bash on Windows..).
My Gulpfile looks like this:
var gulp = require('gulp');
var jshint = require('gulp-jshint');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var uglify = require('gulp-uglify');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var minifyCSS = require('gulp-minify-css');
var sourcemaps = require('gulp-sourcemaps');
var del = require('del');
var browserSync = require('browser-sync');
var reload = browserSync.reload;
// ==== CONFIGURATION ==== //
// Project paths
var src = 'assets/',
dist = 'dist/',
bower = src + 'assets/bower_components/',
css = dist + 'css/',
js = dist + 'js/'
;
// ### JS-linting-compiling
// Lint and minify our Javascript files
gulp.task('js-linting-compiling', function(){
// read all of the files that are in script/lib with a .js extension
return gulp.src('assets/js/*.js')
// run their contents through jshint
.pipe(jshint())
// report any findings from jshint
.pipe(jshint.reporter('default'))
// concatenate all of the file contents into a file titled 'all.js'
.pipe(concat('all.js'))
// write that file to the dist/js directory
.pipe(gulp.dest(js))
// now rename the file in memory to 'all.min.js'
.pipe(rename('all.min.js'))
// run uglify (for minification) on 'all.min.js'
.pipe(uglify())
// write all.min.js to the dist/js file
.pipe(gulp.dest(js));
});
// ### SASS-TO-CSS
// `gulp sass-to-css` - Compile SASS into CSS, autoprefix it and minify it. Also generate source maps (stripped in minified version)
gulp.task('sass-to-css', function () {
gulp.src('assets/sass/style.scss')
.pipe(sourcemaps.init())
.pipe(sass({
includePaths: [
'assets/bower_components/susy/sass'
],
style: 'expanded',
errLogToConsole: true
}))
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(sourcemaps.write())
.pipe(gulp.dest(css))
.pipe(reload({stream: true}))
.pipe(rename({
suffix: '_min'
}))
.pipe(minifyCSS({
keepSpecialComments:0,
}))
.pipe(gulp.dest(css))
.pipe(reload({stream: true}));
});
// ### Clean
// `gulp clean` - Clean our dist folder before we generate new content into it
gulp.task('clean', function (cb) {
del([
// here we use a globbing pattern to match everything inside the `dist` folder, except our gitkeep file
'dist/**/*',
'!dist/.gitkeep{,/**}'
], { dot: true },
cb);
});
// ### Build
// `gulp build` - Run all the build tasks but don't clean up beforehand.
// Generally you should be running `gulp` instead of `gulp build`.
gulp.task('build', ['sass-to-css', 'js-linting-compiling'], function() {
});
// ### Gulp
// `gulp` - Clean up the dist directory and do a complete build.
gulp.task('default', ['clean'], function() {
gulp.start('build');
});
// ### Watch
// `gulp watch` - Use BrowserSync to proxy your dev server and synchronize code
// changes across devices. When a modification is made to an asset, run the
// build step for that asset and inject the changes into the page.
// See: http://www.browsersync.io
gulp.task('watch', function() {
browserSync({
proxy: "local.project.dev",
host: "localhost",
notify: true,
});
gulp.watch(['assets/sass/**/*.scss'], ['sass-to-css']);
gulp.watch(['assets/js/**/*.js'], ['js-linting-compiling']);
gulp.watch('**/*.php', function() {
browserSync.reload();
});
});
Any ideas?

Answer 1

I had the same issue...
Trying to use the includePaths,
the #import in the sass file....
mixing one then the other then both ...
The only thing that has worked for me was moving from susy from bower_components to my sass folder, use a "normal" #import, and it worked.
I am not expert in gulp / node, it might look like a path issue => bower_components is outside the src definition of the gulp task... :/
Hope that helps