Gulp duplicating css when compiling sass into one css file

Question

I'm new to Stack Overflow and Gulp (using 3.9.1). I'm trying to compile all of my scss files into one big css file that I can include in my website. So far my gulpfile looks like this:

var gulp = require('gulp');
var sass = require('gulp-sass');
var concat = require('gulp-concat');

sass.compiler = require('node-sass');

var gulp = require('gulp');
var concat = require('gulp-concat');

gulp.task('sass', [], function() {
    gulp.src("resources/scss/**/*.scss")
        .pipe(concat('main.scss'))
        .pipe(sass())
        .on('error', console.error.bind(console))
        .pipe(gulp.dest('resources/css'));
});

gulp.task('watch', function () {
    gulp.watch('resources/scss/**/*.scss', ['sass']);
});

and my compiling scss file looks like this:

@charset "UTF-8";

@import "partials/variables";
@import "partials/typography";
@import "partials/utilities";
@import "partials/nav";
@import "partials/gallery";
@import "partials/footer";
@import "partials/brand";

Everything in each of these files appears twice in my main.css file (created by my gulp file) but only appears once in the scss files.

Can anyone help me to understand what I've done wrong please? I had a look at some other questions similar to mine, but they didn't seem to fix the issue.

Answer 1

As @DerekNguyen says and other things corrected below:

var gulp = require('gulp');
var sass = require('gulp-sass');

//  next two lines are not needed
//  var concat = require('gulp-concat');    
//  sass.compiler = require('node-sass');

// duplicates not needed
//  var gulp = require('gulp');
//  var concat = require('gulp-concat');

gulp.task('sass', function() {

    // add return statement below
    // your gulp.src would typically be the one file into which
    // the partials are imported, presumably main.scss in your case
    // The resulting css file will automatically be named main.css if you start with main.scss

    return gulp.src("resources/scss/main.scss")
        //  .pipe(concat('main.scss'))
        .pipe(sass())
        .on('error', console.error.bind(console))
        .pipe(gulp.dest('resources/css'));
});

// added done below to signal async completion
gulp.task('watch', function (done) {
    gulp.watch('resources/scss/**/*.scss', ['sass']);
    done();
});