First, Install gulp
, gulp-clean-css
and gulp-rename
to project directory localy
npm install --save-dev gulp gulp-clean-css gulp-rename
Than add following minify-css
task to your gulpfile.js
var gulp = require('gulp');
var cleanCSS = require('gulp-clean-css');
var rename = require('gulp-rename');
gulp.task('minify-css', function() {
return gulp.src('css/dist/dist.css')
.pipe(cleanCSS())
.pipe(rename('dist.min.css'))
.pipe(gulp.dest('css/dist'));
});
gulp.task('watch', function(){
gulp.watch('css/dist/**/*.css', ['minify-css']);
// Other watchers
});
gulp.task('default', ['minify-css', 'watch']);
Here .pipe(cleanCSS())
executes minification of your css/dist/dist.css
file and .pipe(rename('concat.min.css'))
renames it to dist.min.css