grunt contrib-sass sourcemap enable - sass

Question

I can't get a lot of contrib-sass features to work in grunt. I dived into grunt a day ago and I found it really good.
Link to contrib-sass repo which says sourcemaps should be working:
https://github.com/gruntjs/grunt-contrib-sass/commit/e85ee70ccb8839867172b57ca1378293291f8037
note: I have sass bleeding edge, and this feature works fine if I use: sass --watch --scss --sourcemap --no-cache with google chrome canary sourcemaps and Sass stylesheet debugging
here is my Gruntfile.js:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd hh:mm:ss") %> */\n',
concat: {
options: {
separator: '\n// New file\n',
banner: '<%= banner %>'
},
develop: {
files: [
{ src: ['js/develop/plugins.js', 'js/develop/main.js'], dest: 'js/concDev.js' }
]
},
vendor: {
files: [
{ src: ['js/vendor/*.js', '!js/vendor/jquery-1.9.1.min.js', '!js/vendor/modernizr-2.6.2.min.js'], dest: 'js/concVend.js' }
]
}
},
uglify: {
options: {
banner: '<%= banner %>'
},
develop: {
files: [
{ src: ['<%= concat.develop.files[0].dest %>'], dest: 'js/concDev.min.js' }
]
},
vendor: {
files: [
{ src: ['<%= concat.vendor.files[0].dest %>'], dest: 'js/concVend.min.js' }
]
}
},
removelogging: {
dist: {
files: [
{ src: ['js/concDev.min.js'], dest: 'js/concDev.min.js' },
{ src: ['js/concVend.min.js'], dest: 'js/concVend.min.js' },
{ src: ['js/concDev.js'], dest: 'js/concDev.js' },
{ src: ['js/concVend.js'], dest: 'js/concVend.js' }
]
}
},
jshint: {
files: ['gruntfile.js', 'js/develop/*.js'],
options: {
globals: {
jQuery: true,
console: true,
module: true,
document: true
}
}
},
cssmin: {
compress: {
options: {
banner: '<%= banner %>'
},
files: [
{ src: ['css/main.css'], dest: 'css/main.min.css' }
]
}
},
imagemin: {
dynamic_mappings: {
files: [
{
expand: true,
cwd: 'img/',
src: ['**/*.png', '**/*.jpg'],
dest: 'img/',
ext: '.png'
}
]
}
},
sass: {
compressed: {
files: {
'css/main.css': 'css/develop/main.scss'
},
options: {
outputStyle: 'compressed'
}
},
nested: {
files: {
'css/main.css': 'css/develop/main.scss'
},
options: {
sourcemap: true,
outputStyle: 'nested'
}
}
},
rsync: {
deploy: {
src: "./",
dest: '<%= connection.dest %>', // i.e. "var/www"
host: '<%= connection.host %>', // i.e. "user#server.com"
recursive: true,
syncDest: false,
exclude: ["/node_modules", ".*"]
}
},
watch: {
options: {
livereload: true
},
html: {
files: '*.html'
},
js: {
files: ['js/develop/plugins.js', 'js/develop/main.js'],
tasks: ['jshint', 'concat:develop']
},
css: {
files: 'css/develop/main.scss',
tasks: ['sass:nested']
}
}
});
// Load Plugins
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks("grunt-remove-logging");
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-rsync');
// Task Lists
grunt.registerTask('default', ['jshint', 'concat', 'uglify', 'imagemin', 'sass:nested']);
grunt.registerTask('server', ['watch']);
grunt.registerTask('deploy', ['sass:compressed', 'rsync' ]);
};
Btw, as I said im totally new with grunt, if you find other bad practise in my code please let me know. Also great plugin names for ftront-end work always welcome, I saw there are many, only faminilar with a few contrib ones yet.
Note: Somewhy, a lot of sass options doen't work, for example: noCache, lineNumbers, debugInfo, outputStyle:'compact','expanded' (compressed, nested works oO)
~ ae

Answer 1

As of today (07/10/2013):
If you install pre version of sass
gem install sass --pre
and grunt-contrib-sass package, your config file will allow to generate sourcemaps.
If you use compass try using compass: true option in sass task config block or loadPath

Answer 2

I was able to get this to work using the following:
* one note: the map file doesn't get tracked anywhere so I didn't realize it was rewriting it until I deleted a version of the map and then I noticed that it was writing the file.
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
dist: {
options: {
style: 'expanded',
debugInfo: true,
sourcemap: true
},
files: {
'styles/styles.css' : 'styles/sass/styles.scss'
}
},
},
watch: {
css: {
files: '**/*.scss',
tasks: ['sass'],
sourceComments: 'normal'
}
}
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default',['watch']);
}

Answer 3

Just to provide this as an actual answer, sourcemaps aren't available in sass stable yet. They're being worked on in an alpha release. The original question referenced a commit message that noted the code was being future-proofed.
As of 6/24/2013, sourcemaps aren't available in grunt-contrib-sass or grunt-contrib-compass.

Answer 4

It's easy right now, SASS version 3.4.5 works with source maps very well and has some more options to set it up:
$ sass -h
Usage: sass [options] [INPUT] [OUTPUT]
Description:
Converts SCSS or Sass files to CSS.
[...]
Input and Output:
--scss Use the CSS-superset SCSS syntax.
--sourcemap=TYPE How to link generated output to the source files.
auto (default): relative paths where possible,
file URIs elsewhere
file: always absolute file URIs
inline: include the source text in the sourcemap
none: no sourcemaps
[...]
So you can configure your Gruntfile.js e.g. like this:
[...]
sass : {
dist : {
files : {
'example.css' : 'example.scss'
},
options: {
sourcemap: 'auto'
}
}
}
[...]
Now if you run grunt sass task source maps are generated automatically.