How to prevent gulp-sass to create folder "sass" after I gulp my scss file to css file?

Question

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

gulp.task('sass', function() {
  gulp.src('src/**/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('./src/css'));
});

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

I want to put css file into folder src/css. But after gulp, css file will be in src/css/sass catalogue. How to prevent gulp to create sass folder? I just want file in src/css catalogue, not src/css/sass.

Answer 1

I am assuming you have a sass directory inside src.

By default gulp.src() considers everything before the ** as the base. Everything after base, including parts matched by **, will be in the destination file path.

Change your sass task to

gulp.task('sass', function() {
  gulp.src('src/sass/**/*.scss')
             // ^-- now sass directory is part of 'base'
    .pipe(sass())
    .pipe(gulp.dest('./src/css'));
});

Read more about base here.