Css gulp.js:使用';调试信息';论吞吞吐吐

Css gulp.js:使用';调试信息';论吞吞吐吐,css,sass,gulp,Css,Sass,Gulp,我正在尝试将我的SASS文件的行号输入到我编译的CSS文件中。根据,我必须将debug\u info设置为true,但根本不起作用 // Styles gulp.task('styles', function() { return gulp.src('src/sass/**/*.scss') .pipe(sass({errLogToConsole: true})) .pipe(sass({ style: 'expanded', debug_info: true }))

我正在尝试将我的SASS文件的行号输入到我编译的CSS文件中。根据,我必须将
debug\u 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插件是否可以做到这一点吗?

gulp sass
使用
节点sass
作为sass编译器

参考
节点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'));
});
...
再见
拉尔夫

有可能
大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口

在您的代码中,它将如下所示:

// 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
添加的任何注释,因此我对其进行了注释。

ruby sass支持sass调试。使用节点sass(见下文)的gulp sass不支持。切换到ruby sass可能适合您的需要,但这并不是这个问题的正确答案。(顺便说一句,我坚持使用node-sass,因为它更快)感谢
的行号。以前尝试过使用
sourceComments
,但没有成功。插件页面上没有关于这一点的信息。ruby sass不再兼容更新此解决方案:您现在应该使用sourceComments:true注意
sourceComments:true
使我的
.min.css
文件的大小是原来的两倍,而不是原来的一半。将该值更改回
正常值
可显著减小大小