Close GH-68: Make path to source files relative.

Author: Rob Wierzbowski

index.js

@@ -3,15 +3,16 @@ var fs = require('fs');
 var path = require('path');
 var chalk = require('chalk');
 var dargs = require('dargs');
+var slash = require('slash');
 var gutil = require('gulp-util');
 var spawn = require('win-spawn');
 var eachAsync = require('each-async');
 var intermediate = require('gulp-intermediate');
 
-function rewriteSourcemapPaths (tempDir, origBase, cb) {
+function rewriteSourcemapPaths (cssDir, relPath, cb) {
 	var glob = require('glob');
 
-	glob(path.join(tempDir, '**/*.map'), function (err, files) {
+	glob(path.join(cssDir, '**/*.map'), function (err, files) {
 		if (err) {
 			cb(err);
 			return;
@@ -25,10 +26,14 @@ function rewriteSourcemapPaths (tempDir, origBase, cb) {
 				}
 
 				var sourceMap = JSON.parse(data);
+				var stepUp = path.relative(path.dirname(file), cssDir);
 
 				// rewrite sourcemaps to point to the original source files
 				sourceMap.sources = sourceMap.sources.map(function (source) {
-					return path.join(origBase, source.replace(/\.\.\//g, ''));
+					var sourceBase = source.replace(/\.\.\//g, '');
+
+					// normalize to browser style paths if we're on windows
+					return slash(path.join(stepUp, relPath, sourceBase));
 				});
 
 				fs.writeFile(file, JSON.stringify(sourceMap), next);
@@ -43,7 +48,7 @@ module.exports = function (options) {
 	options = options || {};
 	options.cacheLocation = options.cacheLocation || path.join(procDir, '.sass-cache');
 	options.update = '.:' + compileDir;
-	var args = dargs(options, ['bundleExec', 'watch', 'poll']);
+	var args = dargs(options, ['bundleExec', 'watch', 'poll', 'sourcemapPath']);
 	var command;
 
 	// Error handling
@@ -108,8 +113,10 @@ module.exports = function (options) {
 				return cb();
 			}
 
-			if (options.sourcemap) {
-				rewriteSourcemapPaths(tempDir, fileProps.base, function (err) {
+			if (options.sourcemap && options.sourcemapPath) {
+				var cssDir = path.join(tempDir, compileDir);
+
+				rewriteSourcemapPaths(cssDir, options.sourcemapPath, function (err) {
 					if (err) {
 						this.emit('error', new gutil.PluginError('gulp-ruby-sass', err));
 					}

package.json

@@ -42,8 +42,9 @@
     "dargs": "^0.1.0",
     "each-async": "^0.1.3",
     "glob": "^4.0.2",
-    "gulp-intermediate": "^1.1.0",
+    "gulp-intermediate": "^2.0.0",
     "gulp-util": "^2.2.0",
+    "slash": "^0.1.3",
     "win-spawn": "^2.0.0"
   },
   "devDependencies": {

readme.md

@@ -23,9 +23,9 @@ var gulp = require('gulp');
 var sass = require('gulp-ruby-sass');
 
 gulp.task('default', function () {
-	return gulp.src('src/app.scss')
-		.pipe(sass({sourcemap: true}))
-		.pipe(gulp.dest('dist'));
+	return gulp.src('src/scss/app.scss')
+		.pipe(sass({sourcemap: true, sourcemapPath: '../scss'}))
+		.pipe(gulp.dest('dist/css'));
 });
 ```
 
@@ -45,7 +45,19 @@ Note: gulp-ruby-sass only compiles Sass; it won't watch your files. If you want
 Type: `Boolean`  
 Default: `false`
 
-Enable Source Map. **Requires Sass 3.3.0**
+Enable Source Map. **Requires Sass >= 3.3.0 and the [`dest` option](#dest).**
+
+
+##### sourcemapPath
+
+Type: `string`  
+
+A relative path from the output CSS directory to the Sass source directory as seen by your web server.
+
+Because gulp-ruby-sass can't know your CSS destination directory or your server setup you have to give a little extra information to help the browser find sourcemaps. Examples:
+
+- If source is `site/scss`, destination is `site/css`, and you're serving from `site`: `{ sourcemapPath: '../scss' }`.
+- If source is `app/styles`, destination is `.tmp/styles`, and you're serving both `.tmp` and `app`: `{ sourcemapPath: '.' }`.
 
 
 ##### trace

test.js

@@ -3,18 +3,24 @@ var assert = require('assert');
 var gutil = require('gulp-util');
 var sass = require('./index');
 var EOL = require('os').EOL;
+
 var testFile = new gutil.File({
 	cwd: __dirname,
-	base: __dirname + '/fixture',
-	path: __dirname + '/fixture/nested/fixture.scss',
+	base: __dirname + '/styles',
+	path: __dirname + '/styles/nested/fixture.scss',
 	contents: new Buffer('$blue:#3bbfce;.content-navigation{border-color:$blue;}')
 });
 
 it('should compile Sass with sourcemaps', function (cb) {
 	this.timeout(20000);
 
+	// Assume gulp.src('app/styles/**/*.scss')
+	// Assume gulp.dest('dist/styles')
+	// Assume connect().use(connect.static('app')).use(connect.static('.tmp'))
+
 	var stream = sass({
 		sourcemap: true,
+		sourcemapPath: '.',
 		quiet: true
 	});
 
@@ -35,7 +41,7 @@ it('should compile Sass with sourcemaps', function (cb) {
 			assert.equal(file.relative, 'nested/fixture.css.map');
 			assert.equal(sourcemap.version, 3);
 			assert.equal(sourcemap.file, 'fixture.css');
-			assert.equal(sourcemap.sources[0], testFile.path);
+			assert.equal(sourcemap.sources[0], '../nested/fixture.scss');
 		}
 	});