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?

what if you try to remove the rename({ suffix: '.min' } .... cause it's renaming your file putting .min .. — federico scamuzzi, Jan 26 '17 at 13:06
Looks like it's working without the suffix. :/ that's even more weird, any explanation? — Nemanja, Jan 26 '17 at 14:01
But it creates file with suffix the first time, and it works great, next time it should overwrite that file. It's not creating again new file: example.min.min.css... :) — Nemanja, Jan 27 '17 at 07:22

Tanasos · Answer 1 · 2017-01-26T10:00:13.003

0

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.

edited Jan 26 '17 at 10:00

answered Jan 26 '17 at 09:51

Tanasos

3,928
4
33
63

Noup, switched to exact path instead of a variable and still no luck. Any other ideas? – Nemanja Jan 26 '17 at 12:03

Waseef · Answer 2 · 2017-09-23T11:48:34.037

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.

Gulp CSS task not overwriting existing CSS

2 Answers2