如何编译SASS并缩小CSS并在同一任务中使用gulp 4创建其地图

Question

如何编译SASS并缩小CSS并在同一任务中使用gulp 4创建其地图

我使用Gulp 4，我想知道是否有一种方法可以将css与其地图放在一起，并将css与其地图缩小，但在同一任务中，我的意思是这样的：

- css
    - main.css
    - main.css.map
    - main.min.css
    - main.min.css.map

我当前的代码实际上做到了但我有两个任务

const gulp = require('gulp');
const autoprefixer = require('gulp-autoprefixer');
const cleanCSS = require('gulp-clean-css');
const sass = require('gulp-sass');
const sourcemaps = require('gulp-sourcemaps');
const rename = require('gulp-rename');

//declare the scr folder
let root = '../src' + '/';
let scssFolder = root + 'scss/';

//declare the build folder
let build = '../build/' + '/';
let cssFolder = build + 'css';

// Compile scss into css
function css() {
  return gulp
    .src(scssFolder + 'main.scss')
    .pipe(sourcemaps.init({ loadMaps: true }))
    .pipe(
      sass({
        outputStyle: 'expanded',
      }).on('error', sass.logError)
    )
    .pipe(autoprefixer('last 2 versions'))
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest(cssFolder));
}

//minify css
function minCSS() {
  return gulp
    .src(scssFolder + 'main.scss')
    .pipe(sourcemaps.init({ loadMaps: true }))
    .pipe(
      sass({
        outputStyle: 'compressed',
      }).on('error', sass.logError)
    )
    .pipe(autoprefixer('last 2 versions'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest(cssFolder));
}

exports.css = css;
exports.minCSS = minCSS;

和id想知道我是否可以放入一个任务或者如何在一个任务中调用它们，例如：

function css() {
  return gulp
    .src(scssFolder + 'main.scss')
    .pipe(sourcemaps.init({ loadMaps: true }))
    .pipe(
      sass({
        outputStyle: 'expanded',
      }).on('error', sass.logError)
    )
    .pipe(autoprefixer('last 2 versions'))
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest(cssFolder))

//Put here the minify code
.pipe(cleanCSS())
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(cssFolder));

}

但是之前的代码不起作用，因为它创建了main.css和main.css.map

Answer 1

创建新函数，从第一个代码开始同时运行两个函数。

例

function compileAndMinify(){
   return gulp.series(css(),minCss()); 
}