grunt contrib-sass sourcemap enable

Question

我無法獲得大量的貢獻功能，無法在grunt中工作。我前一天潛入咕嚕聲，發現它非常好。

鏈接到了contrib - 薩斯回購它說sourcemaps應該工作： https://github.com/gruntjs/grunt-contrib-sass/commit/e85ee70ccb8839867172b57ca1378293291f8037

注：我頂嘴流血的邊緣，如果我使用此功能工作正常：sass --watch --scss --sourcemap --no-cache與谷歌的Chrome Canary sourcemaps和薩斯樣式表調試

這裏是我的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' ]); 
}; 

順便說一句，正如我所說的IM完全符合新的呼嚕聲，我如果你在我的代碼中發現其他不好的做法，請告訴我。 ftront-end工作的很棒的插件名字總是很受歡迎，我看到有很多，只有幾個貢獻類的faminilar。

注： Somewhy，很多青菜選項doen't工作，例如：非緩存，lineNumbers，debuginfo軟，outputStyle： '緊湊'， '擴大'（壓縮，嵌套的工作OO）

〜 ae

Answer 1

只是爲了提供這個作爲一個實際的答案，源代碼在sass中尚不穩定。他們正在Alpha版本中工作。原始問題引用了一條提交消息，指出該代碼正在面向未來。

截至2013年6月24日，源地圖在grunt-contrib-sass或grunt-contrib-compass中不可用。

Answer 2

截至今天（2013年7月10日）的：

如果安裝青菜

​​3210

和咕嚕-的contrib - 薩斯包前的版本，你的配置文件將允許產生sourcemaps。

如果使用指南針嘗試使用SASS任務配置塊compass: true選項或loadPath

Answer 3

我能得到這個使用工作如下：
* 一個音符：地圖文件沒有得到跟蹤任何地方，所以我沒有意識到它正在重寫它，直到我刪除了一個版本的地圖，然後我注意到它正在寫入文件。

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 4

它現在很容易，SASS版本3.4.5作品與源地圖非常好，有一些更多的選擇來進行設置：

$ 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 
[...] 

所以，你可以配置你的Gruntfile.js例如像這樣：

[...] 

sass : { 
    dist : { 
     files : { 
      'example.css' : 'example.scss' 
     }, 
     options: { 
      sourcemap: 'auto' 
     } 
    } 
} 

[...] 

現在如果您運行grunt sass任務源地圖是自動生成的。