How to set the path and parameters correctly?

Question

gulp.js

Hello!
Tell me how to solve three problems:
1. I set an auto-prefix, but I don’t understand how it works. When unloading from scss to css, everything remains without prefixes.
For now, you have to use a mixin.

@mixin bShad($box) {
  -webkit-box-shadow: $box;
  -moz-box-shadow: $box;
  box-shadow: $box;
}

2. There is a folder: project/app/scss/source/ there are three .scss files in it. It is
necessary that they gather into one css file: project/dist/css/main.css (if I understand correctly, it will appear on its own). Delivered gulp-concat-css, but for some reason all three files with the same path and content are simply transferred to me, although the css files.
Tell me how to set the path correctly? Here is the whole gulpfile.js code

var gulp 		     = require('gulp'),
  sass 	     = require('gulp-sass'),
  concat          = require('gulp-concat-css'),
  autoprefixer = require('gulp-autoprefixer');

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

gulp.task('watch', function() {
  gulp.watch('app/**/*.scss', ['sass']);	
});
 
gulp.task('default', () =>
    gulp.src('src/app.css')
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        .pipe(gulp.dest('dist'))
);

gulp.task('default', function () {
 return gulp.src('app/**/**/*.scss')
   .pipe(concatCss("main.css"))
   .pipe(gulp.dest('app/css/main.css'));
});

3. If I indicated in the .json package that I have a repository connected, then do I need to manually create all the files in it, or should they also appear there somehow?

Answer 1

Everything can be done in one task:

gulp.task('sass', function() {
  return gulp.src('app/**/*.scss') // получаем файлы из указанной директории
    .pipe(sass()) // компилируем sass в css
    .pipe(autoprefixer({ // добавляем вендорные префиксы
      browsers: ['last 2 versions'],
      cascade: false
    }))
    .pipe(concat("main.css")) // объединяем файлы в потоке в один с указанным именем
    .pipe(gulp.dest('dist')); // выгружаем в папку dist
});

The autoprefixer settings say: last 2 versions . I doubt that the latest versions of browsers still require prefixes for shadows. However, you can see and see for yourself https://caniuse.com . To test an autoprefix, try some relatively new properties like display: flex.