Question

我在我的项目中使用Grunt 0.4.5和这些依赖项：

"grunt": "~0.4.5",
"grunt-contrib-concat": "~0.5.0",
"grunt-contrib-uglify": "~0.6.0",
"grunt-contrib-watch": "~0.6.1",
"grunt-contrib-sass": "~0.8.1"

我刚刚注意到grunt-autoprefixer没有添加到我的package.json文件中。那是因为它没有grunt-contrib前缀吗？无论如何，当我从我的监视任务中删除autoprefixer时，源映射对我有效，但是一旦我再次添加它，编译的css文件最后的注释就会被删除。

这是我的autoprefixer配置：

    autoprefixer: {
        options: {
            browsers: ['last 2 version', 'ie 8', 'ie 9']
        },
        single_file: {
              options: {
                // Target-specific options go here.
              },
              src: 'library/css/style.css',
              dest: 'library/css/style.css'
            },
        sourcemap: {
            options: {
                map: true
            }
        },
    },

我的Sass配置如下：

    sass: {
        dist: {
            options: {
                style: 'expanded',
                debugInfo: true,
                sourcemap: true
            },
            files: {
                'library/css/style.css': 'library/scss/style.scss'
            }
        } 
    },

这是我的观察任务：

    watch: {
        options: {
            livereload: true,
            },
        scripts: {
            files: ['library/js/*.js'],
            tasks: ['concat', 'uglify'],
            options: {
                spawn: false,
            },
        },
        css: {
            files: ['library/scss/*.scss'],
            tasks: ['sass', 'autoprefixer'],
            sourceComments: 'normal',
            options: {
                spawn: false,
            }
        },
        page: {
            files: ['*.php', '*.html']
        }
    }

我不知道为什么autoprefixer必须干扰源地图，说实话，我尝试使用false而不是true，根据grunt-autoprefixer中的示例手动指定源地图repo，但无论我做什么评论 - /*# sourceMappingURL=style.css.map */都会从文件中删除，而源地图也无法使用chrome。

编辑：对不起，我只是使用以下方式开始工作：

        sourcemap: {
            options: {
                map: true
            },
            src: 'library/css/style.css',
            dest: 'library/css/style.css' // -> dest/css/file.css, dest/css/file.css.map
        },

我有兴趣知道，出于性能原因，我现在需要在grunt-contrib-sass配置中完全指定一个源图选项吗？编译需要大约2.4秒，因此每0.1秒计数一次！

Answer 1

抱歉，我只是使用以下方式开始工作：

    sourcemap: {
        options: {
            map: true
        },
        src: 'library/css/style.css',
        dest: 'library/css/style.css' // -> dest/css/file.css, dest/css/file.css.map
    },

我有兴趣知道，出于性能原因，我现在需要在grunt-contrib-sass配置中完全指定一个sourcemap选项吗？编译需要大约2.4秒，因此每0.1秒计数！我会做一些测试，看看，据我所知，看起来源代码地图默认是由sass生成的，所以我可能只需要在autoprefixer中指定它

Answer 2

我发现以下内容对我有用：

sass: {
  options: {
    sourceMap: true,
    sourceMapEmbed: false
  },

  dist: {
    files: {
      'css/style.css': 'css/src/style.scss',
      'css/debug.css': 'css/src/debug.scss',
    }
  }
},
autoprefixer: {
  //prefix all files
  multiple_files: {
    expand: true,
    flatten: true,
    src: 'css/*.css',
    dest: 'css/'
  },
  options: {
    map: true,
    annotation: false
  }
},

如果没有指定注释：false，我发现autoprefixer总是用数据-uri /*# sourceMappingURL=style.css.map */覆盖sourceMappingURL无效（我的浏览器检查员不会显示原始的.scss源）。< / p>

我还发现，如果您有多个scss / css文件，则在接受的答案中使用sourcemap不起作用。我相信sourcemap允许你为每个scss-＆gt; css映射设置一组不同的选项，但我希望我的所有选项都有相同的设置。

希望这有帮助！

无法让Sass源地图与grunt-autoprefixer一起使用

2 个答案: