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:

terminalnpm install gulp-rename --save-dev

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

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

Let's now perform file renaming before saving them:

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