1

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

链接到 contrib-sass repo，它说 sourcemaps 应该工作： https ://github.com/gruntjs/grunt-contrib-sass/commit/e85ee70ccb8839867172b57ca1378293291f8037

注意：我有 sass 最前沿，如果我使用这个功能可以正常工作：sass --watch --scss --sourcemap --no-cachewith google chrome canary sourcemaps and Sass stylesheet debugging

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

顺便说一句，正如我所说，我对 grunt 完全陌生，如果您在我的代码中发现其他不好的做法，请告诉我。也总是欢迎用于前端工作的伟大插件名称，我看到有很多，但只有一些 contrib 是熟悉的。

注意：不知何故，很多 sass 选项都不起作用，例如：noCache、lineNumbers、debugInfo、outputStyle:'compact'、'expanded'（压缩，嵌套工作 oO）

〜埃

4

4 回答 4

5

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

如果你安装了 sass 的预版本

gem install sass --pre

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

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

于 2013-07-10T10:05:06.927 回答
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']);
}
于 2013-12-01T04:10:23.123 回答
1

现在很容易，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任务源地图会自动生成。

于 2014-10-03T08:59:30.097 回答
1

只是为了提供这个作为实际答案，源映射在 sass stable 中尚不可用。他们正在开发一个 alpha 版本。最初的问题引用了一条提交消息，指出该代码是面向未来的。

自 2013 年 6 月 24 日起，源地图在 grunt-contrib-sass 或 grunt-contrib-compass 中不可用。

于 2013-06-24T19:14:04.257 回答