Renaming Files in Gulp

When minimizing CSS or JavaScript files, it would be very convenient if the optimized files were marked with min in the name, for example, styles.min.css.

To do this, the gulp-rename plugin is used, which renames the file before saving. To install the plugin, you need to execute the following command in the command line:

npm install gulp-rename --save-dev

Let's now connect the CSS minifier and the installed plugin for renaming:

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

Let's now perform file renaming before saving them:

function task(cb) {
	return src('src/*.css')
		.pipe(cleanCSS())
		.pipe(rename({
				extname: '.min.css'
			})
		)
		.pipe(dest('dist'));
}

Minimize JavaScript files using the gulp-uglify plugin so that the resulting files have the extension .min.js.