【问题标题】:grunt contrib-sass sourcemap enablegrunt contrib-sass 源映射启用
【发布时间】:2013-06-21 03:59:20
【问题描述】:

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

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

注意:我有 sass 最前沿,如果我使用:sass --watch --scss --sourcemap --no-cache 与 google chrome canary 源映射和 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' ]);
};

顺便说一句,正如我所说,我对 grunt 完全陌生,如果您在我的代码中发现其他不好的做法,请告诉我。前端工作的伟大插件名称也总是受欢迎的,我看到有很多,只有少数贡献者。

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

~ae

【问题讨论】:

  • 您链接到的提交说“为了能够在未来支持 Sourcemaps 以及许多其他原因。”
  • ops :) 我应该参加一些英语课程。

标签: sass gruntjs watch no-cache source-maps


【解决方案1】:

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

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

【讨论】:

    【解决方案2】:

    截至今天(2013 年 7 月 10 日):

    如果你安装了 sass 的预版本

    gem install sass --pre
    

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

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

    【讨论】:

    • 我有 sass 的前沿技术,“sass --sourcemap --watch”创建了一个源映射文件。但是使用 grunt-contrib-sass v0.5.0 并没有给我一个 .map 文件。我错过了什么吗?我没有使用指南针,并且在 gruntfile 中有 sourcemap: true 。
    • @DavidGilbertson 你试过grunt --debug --verbose sass吗?或者尝试直接使用 sass sass --sourcemap --scss test.scss:test.css 来检查它是否正常工作。刚刚测试它: sass: { dist: { options: { style: 'expanded', sourcemap: true }, files: { 'test.css': 'test.scss' } } }
    • 我使用的是grunt-contrib-sass 而不是grunt-contrib-scss 所以sourcemap 没有为我生成。将我的任务重命名为 sass 并像没有任何设置的魅力一样工作。 @见我的gruntfile.coffee
    【解决方案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']);
    }
    

    【讨论】:

    • 这适用于我在 Windows 上;红宝石 2.0.0,DevKit 4.7.2
    【解决方案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,任务源映射会自动生成。

    【讨论】:

    • 在选项中添加style: 'compressed',它仍然有效。完美!
    猜你喜欢
    • 2014-10-19
    • 2016-01-07
    • 1970-01-01
    • 1970-01-01
    • 2023-03-12
    • 2017-10-15
    • 1970-01-01
    • 2016-04-08
    • 2018-08-11
    相关资源
    最近更新 更多