Как скомпилировать 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()); 
}