gulp - 为什么 gulp-sourcemaps 输出与 gulp-strip-css-comments 中断？

Question

我想从 CSS 代码中删除所有注释，但我注意到当我将gulp-strip-css-comments添加到我的 gulp 任务时，源映射不再工作，即使我确保 gulp -strip-css -comments/*# sourceMappingURL=style.css.map */使用正则表达式选项保留指向源映射的注释。

下面我在使用gulp-strip-css-comments之前和之后添加了我的代码和输出：

在 gulp-strip-css-comments 之前

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'));
});

在 gulp-strip-css-comments 之后

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 代码放在 sourcemaps 之前 .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'));
});