Gulp keeps adding css every time I save and run gulp instead of creating a new .css file

Question

E.g. If I have body{} when I save and run gulp I will have in my style.min.css body{} body{}. Any idea? Thanks. Feel free to give advice on how to improve my gulpfile.js.

var gulp = require('gulp'),                 // npm install gulp --save-dev
    sass = require('gulp-sass'),            // npm install gulp-sass --save-dev                 
    watch = require('gulp-watch'),          // npm install gulp-watch --save-dev
    minify = require('gulp-clean-css'),     // npm install gulp-cleancss --save-dev
    rename = require('gulp-rename'),        // npm install gulp-rename --save-dev
    concat = require('gulp-concat');        // npm install gulp-concat --save-dev

// Watch
gulp.task('default', function () {
    gulp.watch('./sass/*.scss');
});

// SASS into CSS
gulp.task('styles', function () {
    gulp.src('./sass/*.scss')
        .pipe(sass())
        .pipe(concat('./style.scss'))
        .pipe(gulp.dest('./sass/'))
});

// Minify
gulp.task('minify-css', function () {
    gulp.src('./sass/style.scss')
        .pipe(minify())
        .pipe(rename('style.min.css'))
        .pipe(gulp.dest('./css/'))
});

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

EDIT

Chained them all together.

// SASS into CSS
gulp.task('styles', function () {
    return gulp.src('./sass/*.scss')
        .pipe(sass())                       
        .pipe(concat('./style.css'))        
        .pipe(minify())                     
        .pipe(rename('style.min.css'))     
        .pipe(gulp.dest('./css/'))
});

Answer 1

You must be concatenating it with itself. You have this:

// SASS into CSS
gulp.task('styles', function () {
    gulp.src('./sass/*.scss')
        .pipe(sass())
        .pipe(concat('./style.scss'))
        .pipe(gulp.dest('./sass/'))
});

where even though sass() makes it into a .css file you give it a .scss extension. And then the next time you run 'styles' this gets included with whatever else is in the stream. You don't want that. Change the concat pipe to:

.pipe(concat('./style.css')) 

and the first line of the 'minify-css' task to

gulp.src('./sass/style.css')

and you should be fine.