Gulp 我如何禁用我的SASS和.scss文件被编译成minified.css?

rbl8hiat  于 2023-04-03  发布在  Gulp
关注(0)|答案(1)|浏览(196)

我试图验证我的更新是否正确地对我的.css文件进行了更新,但我的sass.js脚本(如下)不仅将sass文件编译为css,而且还缩小了它们?我没有在我的.pipe(sass()上使用“:compressed”选项,所以我不确定为什么会发生这种情况。

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);
}
scyqe7ek

scyqe7ek1#

负责缩小你的css文件的软件包是cleanCss(“gulp-clean-css”),要解决你的问题,请按照下面的步骤=〉

  • 1 =〉你最后将不得不缩小你的css文件,所以你可以使用它,但正如我得到你的问题,你需要一个美化(不miniefied)的css文件,这样你就可以比较你的最后更改,并确保他们。
  • 2 =〉您可以同时生成CSS文件的美化(非缩小)和缩小版本
  • 3 =〉您只需要将您的gulp脚本更改为以下内容
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、“我希望这对你有帮助,谢谢。

相关问题