1

使用 Gulp，我可以使用指向原始 SASS 文件的源映射生成从 SASS 转译的 CSS，并且我还能够生成源映射来调试缩小的 CSS，但到目前为止我无法弄清楚如何（如果它是甚至可能）使用 Gulp 生成源映射，它允许您调试从 SASS 转译和缩小的 CSS，以及添加供应商前缀等。我已经设法生成了一些源映射输出，但它们最终映射回错误的行.scss 文件，当我执行编译和缩小时。

下面的代码确实会生成源映射作为浏览器获取并读取的输出，但正如我之前所说，Chrome 调试工具指向原始 .scss 文件中的错误文件/行。

这是我的 css-compile Gulp 任务。

// compile SASS

'use strict';

var gulp 			= require('gulp'),
	gutil 			= require('gulp-util'),
	plugins 		= require('gulp-load-plugins')(),
	browserSync 	= require('browser-sync'),
	config 			= require('../config/css-compile.json'),
	isStaging 		= true,
	isProduction 	= false;

gulp.task(config.taskName, function () {
	return gulp.src(config.dirs.src)
        .pipe(plugins.sourcemaps.init())
		.pipe(plugins.sass(config.sass,{sourcemap: true}).on('error', plugins.sass.logError))
        .pipe(gulp.dest(config.dirs.dest))
        .pipe(plugins.minifyCss({map: true}))
        .pipe(plugins.sourcemaps.write('./'))
        .pipe(gulp.dest(config.dirs.dest));
});

4

0 回答 0