gulp.js：在gulp-sass上使用“debug_info”

Question

我正在尝试将SASS文件的行号显示在编译后的CSS文件中。根据文档，我必须将debug_info设置为true，但是完全没有起作用。

// Styles
gulp.task('styles', function() {
  return gulp.src('src/sass/**/*.scss')
    .pipe(sass({errLogToConsole: true}))
    .pipe(sass({ style: 'expanded', debug_info: true }))
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
    .pipe(gulp.dest('build/dev/css'))
    .pipe(minifyCSS())
    .pipe(gulp.dest('build/production/css'));
});

有人知道使用gulp-sass插件是否可以实现这个吗？

- nikoskip

Answer 1

对于 gulp-sass 来说，我认为 SteveLacy 指出的是你所要寻找的解决方案。

在你的代码中，它应该是这样的：

// Styles
gulp.task('styles', function() {
 return gulp.src('src/sass/**/*.scss')
   .pipe(sass({errLogToConsole: true}))
   .pipe(sass({ 
      style: 'expanded',
      sourceComments: 'normal'
    }))
   .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
   .pipe(gulp.dest('build/dev/css'))
   //.pipe(minifyCSS())
   .pipe(gulp.dest('build/production/css'));
});

请注意，gulp-minify-css 会删除由 gulp-sass 添加的任何注释，因此我已将其注释掉。

- Agustín Amenabar

---

更新此解决方案：现在应该使用sourceComments: true。 - jasongonzales

请注意，将 sourceComments: true 应用于我的 .min.css 文件后，文件大小变为原来的两倍，而不是缩小一半。将该值改回 normal 后，文件大小显著减小。 - Rob Scott

Answer 2

gulp-sass使用node-sass作为其SASS编译器。

参考node-sass的文档，它没有“debug_info”。 相反，它有源注释/映射，这可能不是您想要的内容。

关于行号有一个未解决的问题：https://github.com/andrew/node-sass/issues/196

- SteveLacy

Answer 3

您可以使用 gulp-ruby-sass。我在我的项目中使用它来调试信息和行号：

var sass = require('gulp-ruby-sass');
...
// Styles for Development (Watch-Process)
gulp.task('styles-dev', function() {
  return gulp.src('src/styles/main.scss')
    .pipe(sass({
        debugInfo   : true,
        lineNumbers : true,
        loadPath    : 'src/styles',
        style       : 'expanded'
    }))
    .pipe(gulp.dest('dist/styles'));
});
...

Ciao Ralf

- RWAM

---

Ruby Sass支持Sass Debug，而使用node-sass（见下文）的gulp-sass则不支持。 转换到Ruby Sass可能适合您的需求，但这并不是这个问题的正确答案。（顺带一提，我坚持使用node-sass因为它更快） - Lane

感谢lineNumbers。之前尝试使用sourceComments但没有成功。插件页面上也没有关于它的信息。 - extempl

Ruby Sass已不再兼容。 - irth