Using gulp-clean-css and gulp-rename to minify and rename with .min.css prefix, but gulp erases style.min.css file

1.5k Views Asked by At

So, below is my entire gulp file. I have a style.css in my styles/src folder, and I want gulp to output a style.min.css file in my styles/dist folder. gulp-clean-css makes the minified file, and gulp-rename adds the .min suffix.

When I have an empty dist folder and run gulp, it successfully creates the minified css file in dist, but every subsequent edit to style.css (watched by watcher) causes the min file to wipe clean, and never properly populate after that.

var gulp = require('gulp');
var cleanCSS = require('gulp-clean-css');
var rename = require('gulp-rename');

var config = {
   srcCss : 'styles/src/**/*.css',
   distCss: 'styles/dist'
}

gulp.task('minify-css', function() {
    gulp.src(config.srcCss)
        .pipe(cleanCSS())
        .pipe(rename('style.min.css'))
        .pipe(gulp.dest(config.distCss));
});

gulp.task('watch', function() {
    gulp.watch('./styles/src/style.css', ['minify-css'])
});

gulp.task('default', ['minify-css', 'watch']);

To add even further confusion, I use Atom for my IDE, and when I make my edits in Atom, gulp will wipe clean the .min file for any edit that isn't the initial edit (which creates the .min file), but if I do all my edits using nano on the CLI, the .min file populates correctly every time. Maybe I should find a new IDE?

0

There are 0 best solutions below