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

Question

我有一个 Gulpfile，它使用 gulp-cssmin 来缩小我的 CSS，我还尝试使用 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 相关的源映射的答案，所以请赐教！

谢谢。

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