Question

我有一个使用gulp-cssmin缩小我的CSS的Gulpfile，我也尝试使用gulp-sourcemaps获取内联源图（请参阅下面的代码）。没有通过Cssmin管道，我的内联源图完全可以工作。但是当我尝试通过Cssmin在我的“sass”结束时管道一切。任务，我的内联源图停止工作。

// 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（）作为第二个arg，如第二个示例所示：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防止内联源图工作

1 个答案: