Gulp CSS task not overwriting existing CSS

Question

var paths = {
 css: './public/apps/user/**/*.css'
}

var dest = {
 css: './public/apps/user/css/'
}

// Minify and concat all css files

gulp.task('css', function(){
 return gulp.src(paths.css)
  .pipe(concatCSS('style.css'))
  .pipe(minifyCSS({keepSpecialComments: 1}))
  .pipe(rename({
        suffix: '.min'
    }))
  .pipe(gulp.dest(dest.css))
});

When I first run the task it compiles alright and all changes are there. After I change something and run it again it doesn't overwrite the existing minified css file. If I were to delete the minified css and run task again everything works perfect. Any insights?

Answer 1

Try and set the exact path, not a variable. Not that its not a good practice, just try without it.

Also , add a 'use strict'; to your task, so that you can be sure there are no serious errors with your settings. It will give you the right type of errors if there are any.

And, may I ask why are you concatenating your CSS before the production build?

Every file concatenation, minification and etc. should be performed in the 'build' task.

Answer 2

You have to delete your minified version of css before doing minify css.

To achieve this you can use gulp-clean

install gulp-clean as npm install gulp-clean

var gulp = require('gulp'),
    concat = require('gulp-concat'),
    cleanCSS = require('gulp-clean-css'), // this is to minify css
    clean = require('gulp-clean'), //this is to delete files
gulp.task('del-custom-css', function(){
  return gulp.src('./static/custom/css/custom.min.css',{force: true})
  .pipe(clean())
});
gulp.task('minify-custom-css', ['del-custom-css'], function(){
  return gulp.src(['./static/custom/css/*.css'])
  .pipe(concat('custom.min.css'))
  .pipe(cleanCSS())
  .pipe(gulp.dest('./static/custom/css'))
});

Hope it helps.