如何禁用我的SASS和.scs文件编译为缩小的.css

Question

我正在尝试验证对.css文件的更新是否正确，但我的sass.js脚本(如下(不仅将sass文件编译为css，而且还将其缩小？我没有使用"：压缩的"；选项，所以我不确定为什么会发生这种情况。

const gulp = require('gulp');
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const plumber = require('gulp-plumber');
const cleanCSS = require('gulp-clean-css');
const sourcemaps = require('gulp-sourcemaps');
const pxtorem = require('gulp-pxtorem');
const notify = require('gulp-notify');
const src = './source';
const dest = './.tmp';
const css = `${src}/styles`;
gulp.task('sass', () =>
gulp
.src(`${css}/**/*.s+(a|c)ss`)
.pipe(
plumber({
errorHandler: function errors(err) {
errorMessage(err, 'CSS error');
this.emit('end');
},
})
)
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(
autoprefixer({
cascade: false,
})
)
.pipe(cleanCSS({ compatibility: 'ie8' }))
.pipe(pxtorem())
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest(`${dest}/styles`))
);
/** ****************************************************************** */
/** ****************************************************************** */
/** ****************************************************************** */
/** ****************************************************************** */
/** ****************************************************************** */
/** ****************************************************************** */
function errorMessage(err, title) {
notify.onError({
actions: 'Close',
message: `Error: ${title}: ${err}`,
sound: 'Purr',
subtitle: 'Check console for errors',
timeout: 30,
})(err);
}

Answer 1

负责缩小css文件的包是cleanCss("gulp-clean-css"，要解决您的问题，请遵循以下步骤=>

• 1=>你最终将不得不缩小你的css文件，这样你就可以使用它，但正如我得到你的问题，你需要一个美化(而不是缩小(css文件，以便您可以比较上次更改并确保它们。

• 2＝>您可以生成美化的(而不是缩小的(和缩小的版本的css文件同时

• 3=>你只需要将你的吞咽脚本更改为下面的

gulp.task('sass', () =>
gulp
.src(`${css}/**/*.s+(a|c)ss`)
.pipe(
plumber({
errorHandler: function errors(err) {
errorMessage(err, 'CSS error');
this.emit('end');
},
})
)
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(
autoprefixer({
cascade: false,
})
)
.pipe(gulp.dest(`${dest}/styles`)) // => generating not-minified css file beofore minifying

.pipe(cleanCSS({ compatibility: 'ie8' })) // continue processing the file
.pipe(pxtorem())

.pipe(rename({ suffix: '-min' })) // adding suffix "-min" to differentiate between the 2 files


.pipe(sourcemaps.write('.'))
.pipe(gulp.dest(`${dest}/styles`))
);

• 4=>不要忘记安装gulp-rename并将其添加到requires

const rename = require("gulp-rename");

• 5=>我希望这对你有帮助，谢谢