Question

我无法在grunt中使用很多contrib-sass功能。我前一天潜入咕噜声，发现它真的很棒。

链接到contrib-sass repo，其中说源图应该正常工作： https://github.com/gruntjs/grunt-contrib-sass/commit/e85ee70ccb8839867172b57ca1378293291f8037

注意：我有优势，如果我使用：sass --watch --scss --sourcemap --no-cache使用Google Chrome金丝雀源图和Sass样式表调试，此功能正常工作

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

顺便说一句，正如我所说的那样，我是咕噜咕噜的新手，如果你在我的代码中发现其他不良做法，请告诉我。 ftront-end工作的插件名称总是很受欢迎，我看到有很多，只有一些有一些贡献的家伙。

注意：为什么，很多sass选项都不起作用，例如：noCache，lineNumbers，debugInfo，outputStyle：'compact'，'expanded'（压缩，嵌套作品oO）< / p>

~ae

Answer 1

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

如果您安装sass的预先版本

gem install sass --pre

和grunt-contrib-sass包，您的配置文件将允许生成源图。

如果您使用指南针尝试在sass任务配置块中使用compass: true选项或loadPath

Answer 2

我能够使用以下方法使其工作：
* 一个注释：地图文件没有被跟踪到任何地方所以我没有意识到它是重写它，直到我删除了一个版本的地图然后我注意到它正在写文件。 / p>

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

只是提供这个作为一个实际的答案，尚未提供sass稳定的源图。他们正在发布alpha版本。原始问题引用了一条提交消息，指出代码是面向未来的。

截至2013年6月24日，grunt-contrib-sass或grunt-contrib-compass中没有源映射。

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任务源地图会自动生成。

grunt contrib-sass sourcemap enable

4 个答案: