Gulp-cssmin 阻止内联源映射工作

Question

我有一个使用 gulp-cssmin 来缩小我的 CSS 的 Gulpfile，并且我也在尝试使用 gulp-sourcemaps 获取内联源映射（参见下面的代码）。无需通过 Cssmin 管道传输任何内容，我的内联源地图就可以正常工作。但是，当我在 'sass' 任务结束时尝试通过 Cssmin 传输所有内容时，我的内联源映射停止工作。

// Compile SASS to CSS, add vendor prefixes, write sourcemaps, then minify

gulp.task('sass', function(){
   return gulp.src([paths.sass, '!./_styles/_sass/_partials/**/*.scss'])
   .pipe(sourcemaps.init())
   .pipe(sass().on('error', sass.logError))
   .pipe(autoprefixer(autoprefixerOptions))
   .pipe(sourcemaps.write())
   .pipe(cssmin())
   .pipe(gulp.dest('./_styles'));
});

有人知道我在这里遗漏了什么吗？或者如果我只是把东西弄错了？内联源地图是否仍然适用于缩小的 CSS？或者它是 gulp-cssmin 特有的东西？

我在 Stack Overflow 上找不到以前的答案专门处理与 gulp-cssmin 相关的 sourcemaps，所以请指教！

谢谢。

Answer 1

我假设您正在使用 https://www.npmjs.com/package/gulp-cssmin。

gulp-cssmin 使用 https://www.npmjs.com/package/clean-css 清理 css，因此 clean-css 的选项适用。但是，由于传送到 cssmin 的 css 已经包含源映射，因此需要将其转发到 clean-css，但这显然目前没有发生：

应该将输入源映射作为第二个参数传递给 minify()，如第二个示例所示：https://github.com/jakubpawlowicz/clean-css/blob/master/README.md#how-to-work-with-source-maps
但是这里的 minify() 调用没有：https://github.com/chilijung/gulp-cssmin/blob/master/index.js#L42

因此目前似乎无法配置 gulp-cssmin 来更新源映射。

我已添加问题 https://github.com/chilijung/gulp-cssmin/issues/22 请求添加缺少的功能。

更新

我发现 https://www.npmjs.com/package/gulp-clean-css 在幕后也使用 clean-css 并支持源映射！

您需要将代码更新为：

var cleanCSS = require('gulp-clean-css');

gulp.task('sass', function(){
   return gulp.src([paths.sass, '!./_styles/_sass/_partials/**/*.scss'])
   .pipe(sourcemaps.init())
   .pipe(sass().on('error', sass.logError))
   .pipe(autoprefixer(autoprefixerOptions))
   .pipe(cleanCSS())
   .pipe(sourcemaps.write())
   .pipe(gulp.dest('./_styles'));
});

即将 cleanCSS() 移到 sourcemaps.write().

之前

总的来说，这里有一个不错的 gulp 支持源映射的插件列表：https://github.com/floridoo/gulp-sourcemaps/wiki/Plugins-with-gulp-sourcemaps-support

Gulp-cssmin 阻止内联源映射工作

Gulp-cssmin Preventing Inline Sourcemaps from Working

gulp

gulp-sourcemaps