gulpが.cssとcss.mapsを.scssディレクトリにレンダリングするのはなぜですか？

Question

私はこのタスクを実行するときに.cssと.css.mapファイルがレンダリングされる理由を理解しようと少し時間を費やしました。

/assets 
--/js 
--/sass 
----/includes 
------/components 
--------/_body.scss 
--------/_nav.scss 
--------/_hamburger.scss 
----/styles.scss 
    --/css 

をコンパイルする前に

 //list dependencies 
var gulp = require('gulp'); 
var sass = require('gulp-sass'); 
var concat = require('gulp-concat'); 
// var minify = require('gulp-minify-css'); 
// var merge = require('merge-stream'); 
var watch = require('gulp-watch'); 

/*sass watch and compiler */ 
gulp.task('sass', function() { 
    return gulp.src('./assets/sass/styles.scss') //simon H change 
      .pipe(sass().on('error', sass.logError)) 
      .pipe(gulp.dest('./dist/css')); 
}); 
/*sass compiler */ 

gulp.task('scripts', function() { 
    return gulp.src("./assets/js/**/*.js") 
    .pipe(concat('scripts.js')) 
    .pipe(gulp.dest('./dist/js')); 
}); 

gulp.task('watch', function() { 
    gulp.watch('./assets/sass/styles.scss', ['sass']); 
    gulp.watch('./assets/js/**/*.js', ['scripts']); 
}); 

gulp.task("build", ['sass','scripts','watch']); 

フォルダ構造は次のようになります。そして、それが一度構築され、このようになります。

/assets 
--/js 
--/sass 
----/includes 
------/components 
--------/_body.css  <- 
--------/_body.css.map <-- new files 
--------/_body.scss 
--------/_nav.scss 
--------/_hamburger.scss 
----/styles.scss 
    --/css 
dist/ 
--/css 
----/styles.css 

Styles.scss内容

@import 'includes/components/_nav'; 
@import 'includes/components/_hamburger'; 
@import 'includes/components/_body'; 

これは、それが動作コンパイルしたら、私はすべて同じ_body.scssファイルを（変更すると、しかし、CSSとcss.mapファイルがこの場所に作成されています他のscssファイル）。私は_body.cssと他のファイルをassets/sassフォルダにコンパイルしたくありません。

Answer 1

メインサスファイルをガルプに見せてインポートするのはなぜでしょうか？

return gulp.src('./assets/sass/styles.scss')