为什么吞咽源地图输出中断与吞咽带css-注释？

Question

我想从CSS代码中删除所有注释，但我注意到，当我将一条龙-css-评论添加到gulp任务中时，源地图不再起作用，即使是在我使用正则表达式选项确保gulp注释保留指向源地图/*# sourceMappingURL=style.css.map */的注释时也是如此。

下面我已经添加了我的代码和输出之前和之后使用一条条css-注释。

在吞咽之前的-strip css-注释

gulp.task('sass:dev', function () {
  gulp.src('./sass/*.scss')
    .pipe(sourcemaps.init())
    .pipe(
      sass({
        includePaths: [
          './node_modules/breakpoint-sass/stylesheets/'
        ]
      })
      .on('error', sass.logError)
    )
    .pipe(autoprefixer({
      browsers: ['last 2 version', 'ie 11']
    }))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('./css'));
});

​

​

后吞咽-剥离-css-注释

gulp.task('sass:dev', function () {
  gulp.src('./sass/*.scss')
    .pipe(sourcemaps.init())
    .pipe(
      sass({
        includePaths: [
          './node_modules/breakpoint-sass/stylesheets/'
        ]
      })
      .on('error', sass.logError)
    )
    .pipe(autoprefixer({
      browsers: ['last 2 version', 'ie 11']
    }))
    .pipe(sourcemaps.write('.'))
    .pipe(stripCssComments({preserve: /^# sourceMappingURL=/}))
    .pipe(gulp.dest('./css'));
});

​

​

Answer 1

将stripCssComments代码放在源代码地图.pipe(sourcemaps.write('.'))之前

​

gulp.task('sass:dev', function () {
  gulp.src('./sass/*.scss')
    .pipe(sourcemaps.init())
    .pipe(
      sass({
        includePaths: [
          './node_modules/breakpoint-sass/stylesheets/'
        ]
      })
      .on('error', sass.logError)
    )
    .pipe(autoprefixer({
      browsers: ['last 2 version', 'ie 11']
    }))
    .pipe(stripCssComments({preserve: /^# sourceMappingURL=/}))  
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('./css'));
});

​