Building CSS code includes multiple steps like compiling preprocessors, transforming CSS with PostCSS, minify to reduce size and rename file for production version. I will show you how to build pure CSS code. I don't use preprocessor or transform CSS. I only minify, rename and bundle code to the output directory.

First we need to install gulpjs and its plugins in your project

npm install --save-dev gulp gulp-clean-css gulp-rename

In your gulpfile.js create a buildCSS function and export it the default task

const { src, dest } = require("gulp");
const cleanCSS = require("gulp-clean-css");
const rename = require("gulp-rename");

const buildCSS = () => {};

exports.default = buildCSS;

You select all CSS files that you need to build for production and pipe to your output directory

const { src, dest } = require("gulp");
const cleanCSS = require("gulp-clean-css");
const rename = require("gulp-rename");

const buildCSS = () => {
  return src("src/style.css").pipe(dest("dist"));
};

exports.default = buildCSS;

You call cleanCSS function to minify CSS code and rename file's extension to min.css

const { src, dest } = require("gulp");
const cleanCSS = require("gulp-clean-css");
const rename = require("gulp-rename");

const buildCSS = () => {
  return src("src/*.css")
    .pipe(cleanCSS())
    .pipe(rename({ extname: ".min.css" }))
    .pipe(dest("dist"));
};

exports.default = buildCSS;

Run gulp command

gulp

You now see your CSS file was minified and rename to .min.css in the output directory