Combine and minify multiple css files to one with Gulp 4

Introduction

This is a simple example. More complex scripts can be found in other articles.

To run this script install nodejs and Gulp 4 .

If you need guidance please read the nodejs manual and Gulp 4 manual

Example

Let's assume that we are in the project directory

There is a subdirectroy css , with multiple .css files

Goal is to combine all files in one new_style.css and put them to new directory.

In addition it is possible to minimize everything with clean-css and run with autoprefixer from PostCSS

Also .pipe(uglify()) can be used

In the project directory create gulpfile.js and paste the following code

const gulp = require('gulp'); const postcss = require('gulp-postcss'); const autoprefixer = require('autoprefixer'); const uglify = require('gulp-uglify'); const concat = require('gulp-concat'); const cleancss = require('gulp-clean-css'); gulp.task('default', function(done) { console.log("Gulp is running!"); done(); }); gulp.task ('styles', function(done) { console.log("style is running!"); return gulp.src('./css/*.css') .pipe(postcss([autoprefixer])) .pipe(cleancss()) .pipe(concat('new_style.css')) .pipe(gulp.dest('new')) done(); } );

Task styles combines .css files

To run this script execute

gulp styles

If you forget task name run

gulp --tasks

To see all available tasks