Combine and minify multiple css files to one with Gulp 4
| Introduction | |
| Example | |
| Related Articles |
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
Article author: Andrei Olegovich
| Gulp | |
| Concat multiple css to one | |
| Send files via ftp with Gulp | |
| Gulp series | |
| Process only changed files with gulp.watch().on('change') | |
| Copy Directory Gulp | |
| Video Tutorials | |
| JavaScript | |
| NodeJS | |
| NPM | |
| Web |
